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


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 相关文章推荐
一段批量给页面上的控件赋值js
Jun 19 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
js加减乘除精确运算方法实例代码
Jan 17 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开启gzip页面压缩实例
2013/06/09 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
功能强大的php文件上传类
2016/08/29 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
python+opencv实现霍夫变换检测直线
2020/10/23 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
python匿名函数用法实例分析
2019/08/03 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
python sleep和wait对比总结
2021/02/03 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
《满井游记》教学反思
2014/02/26 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
放假通知范文
2015/04/14 职场文书
请客吃饭开场白
2015/06/01 职场文书
黄埔军校观后感
2015/06/10 职场文书