在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法


Posted in Javascript onAugust 05, 2016

最近在使用微信、支付宝、百度钱包实现网页支付,对支付成功将自动关闭页面,对于支付失败,将显示错误信息。当在错误页面的时候,点击返回或者Android物理按键上一步的时候,将关闭页面。

在微信、支付宝、百度钱包中,他们对页面关闭进行了封装,传统的window.close()是无效的,必须要使用它们的js代码才能关闭。

下面是三种移动app的关闭方式:

WeixinJSBridge.call('closeWindow');//微信 
AlipayJSBridge.call('closeWebview'); //支付宝 
BLightApp.closeWindow();//百度钱包

通过浏览器的头判断是那种浏览器:

var ua = navigator.userAgent.toLowerCase(); 
f(ua.match(/MicroMessenger/i)=="micromessenger") { 
alert("微信客户端"); 
} else if(ua.indexOf("alipay")!=-1){ 
alert("支付宝客户端"); 
}else if(ua.indexOf("baidu")!=-1){ 
alert("百度客户端"); 
}

对返回、上一页、后退进行监听,并对history中放入当前页地址:

$(function(){ 
pushHistory(); 
window.addEventListener("popstate", function(e) { 
}, false); 
function pushHistory() { 
var state = { 
title: "title", 
url: "#" 
}; 
window.history.pushState(state, "title", "#"); 
} 
});

整个实现完整代码:

$(function(){ 
pushHistory(); 
window.addEventListener("popstate", function(e) { 
pushHistory(); 
var ua = navigator.userAgent.toLowerCase(); 
if(ua.match(/MicroMessenger/i)=="micromessenger") { 
WeixinJSBridge.call('closeWindow'); 
} else if(ua.indexOf("alipay")!=-1){ 
AlipayJSBridge.call('closeWebview'); 
}else if(ua.indexOf("baidu")!=-1){ 
BLightApp.closeWindow(); 
} 
else{ 
window.close(); 
} 
}, false); 
function pushHistory() { 
var state = { 
title: "title", 
url: "#" 
}; 
window.history.pushState(state, "title", "#"); 
} 
});

以上所述是小编给大家介绍的在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 #Javascript
JavaScript中的this引用(推荐)
Aug 05 #Javascript
JS实现HTML表格排序功能
Aug 05 #Javascript
JavaScript如何实现跨域请求
Aug 05 #Javascript
JavaScript数组操作函数汇总
Aug 05 #Javascript
Jquery获取当前城市的天气信息
Aug 05 #Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 #Javascript
You might like
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python数据类型详解(二)列表
2016/05/08 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
想学画画?python满足你!
2020/12/24 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
Python与C/C++的相互调用案例
2021/03/04 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
台湾生鲜宅配:大口市集
2017/10/14 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
《三亚落日》教学反思
2014/04/26 职场文书
大学社团计划书
2014/05/01 职场文书
启动仪式策划方案
2014/06/14 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
蜗居观后感
2015/06/11 职场文书
python如何获取网络数据
2021/04/11 Python
52条SQL语句教你性能优化
2021/05/25 MySQL
如何理解python接口自动化之logging日志模块
2021/06/15 Python