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


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 文本框使用小结
May 22 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
详解Python爬虫的基本写法
2016/01/08 Python
python Django批量导入数据
2016/03/25 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
python如何随机生成高强度密码
2020/08/19 Python
浅谈Python __init__.py的作用
2020/10/28 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
html5时钟实现代码
2010/10/22 HTML / CSS
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
三爱活动实施方案
2014/03/19 职场文书
致青春观后感
2015/06/09 职场文书
mysql优化
2021/04/06 MySQL
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers