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


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通过正则表达式实现表单验证电话号码
Mar 07 Javascript
javascript类型转换示例
Apr 29 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
vue跨域解决方法
Oct 15 Javascript
vue组件name的作用小结
May 23 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
原生js实现抽奖小游戏
Jun 27 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正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
jQuery实现数字加减效果汇总
2014/12/16 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
JS中的事件委托实例浅析
2018/03/22 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
Django URL传递参数的方法总结
2016/08/28 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
python MD5加密的示例
2020/10/19 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
外贸销售员求职的自我评价
2013/11/23 职场文书
三年级语文教学反思
2014/02/01 职场文书
人事部岗位职责范本
2014/03/05 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
初婚初育证明范本
2014/11/24 职场文书
会计工作态度自我评价
2015/03/06 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技