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


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 相关文章推荐
JavaScript 事件系统
Jul 22 Javascript
jquery高效反选具体实现
May 05 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
TS 类型兼容教程示例详解
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创建动态图像
2006/10/09 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
php验证码实现代码(3种)
2015/09/07 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
JS编程小常识很有用
2012/11/26 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
理解javascript对象继承
2016/04/17 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
jquery图片放大镜效果
2017/06/23 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
python读取与写入csv格式文件的示例代码
2017/12/16 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
2014年党员公开承诺书范文
2014/03/28 职场文书
卫生系统先进事迹
2014/05/13 职场文书
体育馆的标语
2014/06/24 职场文书
大学迎新生标语
2014/10/06 职场文书
门卫岗位职责
2015/02/09 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
检讨书怎么写?
2019/06/21 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
java executor包参数处理功能 
2022/02/15 Java/Android