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


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 (十) jQueryUI常用功能实战
Feb 23 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
CocosCreator入门教程之网络通信
Apr 16 Javascript
代码解析React中setState同步和异步问题
Jun 03 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
用Vue写一个分页器的示例代码
2018/04/22 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
探究Python中isalnum()方法的使用
2015/05/18 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
Python实现手绘图效果实例分享
2020/07/22 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
Ajax的优点和缺点
2014/11/21 面试题
校园网站的创业计划书范文
2013/12/30 职场文书
幼儿园标语大全
2014/06/19 职场文书
环保建议书作文300字
2015/09/14 职场文书
golang特有程序结构入门教程
2021/06/02 Python
浅谈Python数学建模之线性规划
2021/06/23 Python