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

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

Mar 28, 2017 pm 01:58 PM

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

或者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", "#");  
            }  
        });
登录后复制

以上就是 在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的内容,更多相关内容请关注PHP中文网(www.php.cn)!

相关文章:

js关闭当前页面(窗口)的几种方式总结

待指定时间后自动跳转或关闭当前页面的js代码

打开新窗口关闭当前页面不弹出关闭提示js代码

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1663
14
CakePHP 教程
1420
52
Laravel 教程
1313
25
PHP教程
1266
29
C# 教程
1237
24
在使用PHP调用支付宝EasySDK时,如何解决'Undefined array key 'sign'”报错问题? 在使用PHP调用支付宝EasySDK时,如何解决'Undefined array key 'sign'”报错问题? Mar 31, 2025 pm 11:51 PM

问题介绍在使用PHP调用支付宝EasySDK时,按照官方提供的代码填入参数后,运行过程中遇到报错信息“Undefined...

公司安全软件导致应用无法运行?如何排查和解决? 公司安全软件导致应用无法运行?如何排查和解决? Apr 19, 2025 pm 04:51 PM

公司安全软件导致部分应用无法正常运行的排查与解决方法许多公司为了保障内部网络安全,会部署安全软件。...

H5页面制作和微信小程序有什么不同 H5页面制作和微信小程序有什么不同 Apr 05, 2025 pm 11:51 PM

H5更灵活,可定制性强,但需要娴熟的技术;小程序上手快,维护便捷,但受限于微信框架。

H5和小程序与APP的区别 H5和小程序与APP的区别 Apr 06, 2025 am 10:42 AM

H5、小程序和APP的主要区别在于:技术架构:H5基于网页技术,小程序和APP为独立应用程序。体验和功能:H5轻便易用,功能受限;小程序轻量级,交互性好;APP功能强大,体验流畅。兼容性:H5跨平台兼容,小程序和APP受平台限制。开发成本:H5开发成本低,小程序中等,APP最高。适用场景:H5适合信息展示,小程序适合轻量化应用,APP适合复杂功能应用。

企业微信中的JS资源缓存问题如何解决? 企业微信中的JS资源缓存问题如何解决? Apr 04, 2025 pm 05:06 PM

企业微信的JS资源缓存问题探讨在进行项目功能升级时,常常会遇到部分用户未能成功升级的情况,尤其是在企�...

公司安全软件与应用冲突怎么办?HUES安全软件导致常用软件无法打开如何排查? 公司安全软件与应用冲突怎么办?HUES安全软件导致常用软件无法打开如何排查? Apr 01, 2025 pm 10:48 PM

公司安全软件与应用兼容性问题及排查方法许多企业为了保障内网安全,会安装安全软件。然而,安全软件有时...

H5和小程序的开发工具有哪些 H5和小程序的开发工具有哪些 Apr 06, 2025 am 09:54 AM

H5开发工具推荐:VSCode、WebStorm、Atom、Brackets、Sublime Text;小程序开发工具:微信开发者工具、支付宝小程序开发者工具、百度智能小程序IDE、头条小程序开发者工具、Taro。

See all articles