• 技术文章 >web前端 >H5教程

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

    黄舟黄舟2017-03-28 13:58:52原创4201
    最近在使用微信、支付宝、百度钱包实现网页支付,对支付成功将自动关闭页面,对于支付失败,将显示错误信息。当在错误页面的时候,点击返回

    或者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中文网(m.sbmmt.com)!

    相关文章:

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

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

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

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

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    上一篇: 百度糯米app中关闭网页或窗口的方法,99%的人都不知道,网上也找不到 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 开发人员所需要知道的HTML5性能分析面面观_html5教程技巧• HTML5 b和i标记将被赋予真正的语义_html5教程技巧• 避免常见的六种HTML5错误用法 (5-6)• HTML 5可以做五件事情 超出你的想象• Html5 Canvas初探学习笔记(13) -图片变换
    1/1

    PHP中文网