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


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写的操作系统
Apr 23 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
layui 实现表格某一列显示图标
Sep 19 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时间不正确的解决方法
2008/04/09 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
javascript实现拖放效果
2015/12/16 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
Python3基础之基本数据类型概述
2014/08/13 Python
Python实现的检测网站挂马程序
2014/11/30 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
python操作redis数据库的三种方法
2020/09/10 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
中级会计职业生涯规划范文
2014/01/16 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
县委务虚会发言材料
2014/10/20 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
故宫的导游词
2015/01/31 职场文书
工作失职自我检讨书
2015/05/05 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
医院病假条怎么写
2015/08/17 职场文书
浅谈python中的多态
2021/06/15 Python