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


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 相关文章推荐
模仿jQuery each函数的链式调用
Jul 22 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
老生常谈ES6中的类
Jul 31 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 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
php中cookie的使用方法
2014/03/29 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
css图片自适应大小
2007/11/28 Javascript
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
django缓存配置的几种方法详解
2018/07/16 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
Python 存取npy格式数据实例
2020/07/01 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
介绍一下#error预处理
2015/09/25 面试题
岗位职责范本
2013/11/23 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
药店促销活动策划方案
2014/08/24 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
Python中的嵌套循环详情
2022/03/23 Python
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers