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


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实战_读书笔记2 选择器
Jan 22 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
JavaScript之实现一个简单的Vue示例
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
jQuery 源码分析笔记
2011/05/25 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
php判断当前操作系统类型
2015/10/28 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
js中的push和join方法使用介绍
2013/10/08 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
django Admin文档生成器使用详解
2019/07/22 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
django 外键创建注意事项说明
2020/05/20 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
医院实习介绍信
2014/01/12 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL