Implement the method of clicking the return button to close the current page and window in WeChat, Alipay, and Baidu Wallet

Recently, I have been using WeChat, Alipay, and Baidu Wallet to realize web payment. The page will be automatically closed for successful payments, and an error message will be displayed for failed payments. When on the error page, click Return or Android physical keys to the previous step, the page will be closed.

In WeChat, Alipay, and Baidu wallets, they encapsulate page closing. The traditional window.close() is invalid and they must use their js code to close.

Here are three ways to close mobile apps:

 WeixinJSBridge.call('closeWindow');//WeChat AlipayJSBridge.call('closeWebview'); //AlipayBLightApp.closeWindow();//Baidu Wallet

Judging from the browser's header, which browser is:

 var ua = navigator.userAgent.toLowerCase(); f(ua.match(/MicroMessenger/i)=="micromessenger") { alert("WeChat Client"); } else if(ua.indexOf("alipay")!=-1){ alert("Alipay Client"); }else if(ua.indexOf("baidu")!=-1){ alert("Baidu Client"); }

Listen to the return, previous page, and back, and put the current page address in history:

 $(function(){ pushHistory(); window.addEventListener("popstate", function(e) { }, false); function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); } });

The complete code of the entire implementation:

 $(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", "#"); } });

The above is the method of clicking the return button to close the current page and window in WeChat, Alipay, and Baidu Wallets. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!