場景：開發(fā)微信內(nèi)的H5活動，需要進(jìn)行微信授權(quán)，我們采用的是在一個靜態(tài)頁面（只有js，所以是個空白頁面）內(nèi)進(jìn)行授權(quán)，授權(quán)后再跳轉(zhuǎn)到活動主頁。

客戶需求：從活動主頁返回時不顯示這個授權(quán)頁面（空白頁面），直接退出。

解決方案：（方案一為踩過的坑；方案二為放在前端處理的方案）

方案一：（不可行）

直接監(jiān)聽需要關(guān)閉窗口的頁面的返回事件來關(guān)閉窗口。示例代碼：

1 pushHistory(); 2 window.addEventListener("popstate", function (e) { 3 WeixinJSBridge.call('closeWindow'); 4 }, false); 5 function pushHistory() { 6 var state = { 7 title: "title", 8 url: "#" 9 }; 10 window.history.pushState(state, "title", "#"); 11 }

此方案存在的bug：在微信內(nèi)置瀏覽器內(nèi)該事件會繼承到子頁面（需要關(guān)閉窗口的頁面為主頁面，在主頁面跳轉(zhuǎn)到的其他頁面稱為子頁面），在子頁面點擊返回也會關(guān)閉窗口。（暫未找到原因所在，如有大牛解決，歡迎留言指導(dǎo)~）

方案二：（可行）

在方案一的基礎(chǔ)上優(yōu)化，加入session判斷當(dāng)前頁面是否為需要關(guān)閉窗口的頁面。示例代碼：

1 　　　　 sessionStorage.setItem('key', 1);

　　　　　　 pushHistory(); 2 window.addEventListener("popstate", function (e) { 3 if(sessionStorage.getItem('key') != 1) { 4 sessionStorage.setItem('key', 1); 5 } 6 if(sessionStorage.getItem('key') == 1) { 7 document.addEventListener('WeixinJSBridgeReady',?function(){?WeixinJSBridge.call('closeWindow');?},?false);? 8 WeixinJSBridge.call('closeWindow'); 9 parent.WeixinJSBridge.call('closeWindow');//網(wǎng)上有人認(rèn)為微信內(nèi)置瀏覽器和本地開發(fā)測試的環(huán)境不一樣，微信內(nèi)部是采用iframe方式加載頁面的（暫未得到考證），所以我采用了兩種方式都寫的兼容寫法 10 } 11 12 }, false); 13 function pushHistory() { 14 var state = { 15 title: "title", 16 url: "#" 17 }; 18 window.history.pushState(state, "title", "#"); 19 } 思路：將主頁面（需要關(guān)閉窗口的頁面）的key值設(shè)為1，子頁面（從主頁面跳轉(zhuǎn)到的其他頁面）的key值設(shè)為其他任意值，判斷key值是否為1，為1的時候點擊返回再關(guān)閉窗口。（注意：每次進(jìn)到主頁面的時候都要將key值重置為1。
　　　因為session的生命周期是當(dāng)前窗口，從其他頁面子頁面回到主頁面會改變key）
方案三：（替換方案）
在授權(quán)頁面加入活動方的宣傳廣告，避免空白。
方案四：（最優(yōu)方案）
微信授權(quán)放在后臺進(jìn)行，這樣就不會存在這個授權(quán)頁面，也就不用去考慮會出現(xiàn)空白的問題了。
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的微信内置浏览器点击“返回”关闭窗口的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。