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


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源码不错的工具
Dec 26 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
Javascript节点关系实例分析
May 15 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 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
新52大事件
2020/03/03 欧美动漫
php $_ENV为空的原因分析
2009/06/01 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
探讨js中的双感叹号判断
2013/11/11 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
JS前端加密算法示例
2016/12/22 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
tornado捕获和处理404错误的方法
2014/02/26 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
英国精品买手店:Browns Fashion
2016/09/29 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
重阳节登山活动方案
2014/02/03 职场文书
护理中职生求职信范文
2014/02/24 职场文书
品质标语大全
2014/06/21 职场文书
2014年国庆标语
2014/06/30 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
假期安全教育广播稿
2014/10/04 职场文书
中标通知书格式
2015/04/17 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
火烧圆明园的观后感
2015/06/03 职场文书