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

最近在使用微信、支付宝、百度钱包实现网页支付,对支付成功将自动关闭页面,对于支付失败,将显示错误信息。当在错误页面的时候,点击返回

或者Android物理按键上一步的时候,将关闭页面。

在微信、支付宝、百度钱包中,他们对页面关闭进行了封装,传统的window.close()是无效的,必须要使用它们的js代码才能关闭。下面是三种移动app

的关闭方式:

WeixinJSBridge.call('closeWindow');//微信
 AlipayJSBridge.call('closeWebview');  //支付宝
 BLightApp.closeWindow();//百度钱包

通过浏览器的头判断是那种浏览器:

 var ua = navigator.userAgent.toLowerCase();
if(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", "#");
			}
		});
时间: 2024-09-26 23:54:24

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

EasyUI 中点击取消按钮关闭Dialog(对话框窗口)

1.在取消按钮里的function中通过id找到这个对话框所在的层, 2.点出这个对话框,然后在括号了写入关闭的方法 <div id="dl1" class="easyui-dialog" title="窗口" style="width:400px;height: 200px" data-options=" toolbar:[ { text:'添加', iconCls:'icon-add', handler:f

scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s>=782) {//782是导航条离页面顶部的距离(px) $('.nav').addClass('fixednav'); } else{ $('.nav').removeClass('fixednav'); } });}); .fixednav{ position:fixed; top:0px; le

问题:asp.net 点击button按钮调到页面顶部;结果:asp.net点击一个按钮,使页面跳转到本面页上的指定位置

asp.net点击一个按钮,使页面跳转到本面页上的指定位置 (2011-04-19 16:46:51) 转载▼ 标签: it   最近在做一个项目. 用到标题所说的功能. 实现方法: 1.在aspx中添加一个javascript: <script language="javascript" type="text/javascript">         <!-- function autoclick()         {            

微信+支付宝+QQ钱包 二维码支付整合 源码20171107

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1&quo

第一个微信小程序(实现点击一个按钮弹出toast)

今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用. 项目的目录是这个样子的: app.js.app.json.app.wxss是全局文件,必不可少的文件.定义在app.wxss中的样式为全局样式,作用于每一个页面.在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器. app.js文件代码: App({ onLaunch: function () { console.log('小程序已启动') }, onShow: f

js-点击tab按钮,同一页面显示不同的内容

效果: html: JS: css: .tabs-two{ .two{ display: inline-block; font-size:14px; height: 17px; font-weight:300; color:#444444; margin-top:10px; height:26px; text-align: center; line-height: 26px; border-radius:2px; cursor: pointer; } .two:hover{ background

监听当点击微信等app的返回按钮或者浏览器的上一页或后退按钮的事件

在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的 需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢. 首先我们要了解浏览器的history.大家知道在页面中我们可以使用JavaScript window history,后退到前面页面,但是由于安全原因javascript不允许修改 history里已有的url链接,但可以使用pushStat

关于微信页面的返回按钮

在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的 需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢. 我相信很多朋友像我一样,在百度.搜狗里面搜索很久都没找到方法.下面就来告诉大家怎样监听的方法: 首先我们要了解浏览器的history.大家知道在页面中我们可以使用JavaScript window history,后退到前面页面,但是由于安全

onpopstate浏览器点击回退按钮时触发的事件

知识点: 1.onpopstate事件,点击后退按钮(或者在JavaScript中调用history.back()方法)时触发: 2.hash 属性:可对URL的锚部分(从 # 号开始的部分)进行操作(可读可写): 关于hash的链接点击打开链接 需求: 微信页面,在当前页面点击某处时,弹出一个覆盖整个手机屏幕的层,弹出这个层以后,点击微信屏幕的返回按钮时,隐藏弹出层,而不退出当前页面! 解决方案: 在点击事件发生的时候利用hash属性给URL加上锚点,展示弹出层,而点击返回按钮后,去掉URL锚