場景：開發微信內的H5活動，需要進行微信授權，我們采用的是在一個靜態頁面（只有js，所以是個空白頁面）內進行授權，授權后再跳轉到活動主頁。

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

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

方案一：（不可行）

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

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：在微信內置瀏覽器內該事件會繼承到子頁面（需要關閉窗口的頁面為主頁面，在主頁面跳轉到的其他頁面稱為子頁面），在子頁面點擊返回也會關閉窗口。（暫未找到原因所在，如有大牛解決，歡迎留言指導~）

方案二：（可行）

在方案一的基礎上優化，加入session判斷當前頁面是否為需要關閉窗口的頁面。示例代碼：

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');//網上有人認為微信內置瀏覽器和本地開發測試的環境不一樣，微信內部是采用iframe方式加載頁面的（暫未得到考證），所以我采用了兩種方式都寫的兼容寫法 10 } 11 12 }, false); 13 function pushHistory() { 14 var state = { 15 title: "title", 16 url: "#" 17 }; 18 window.history.pushState(state, "title", "#"); 19 } 思路：將主頁面（需要關閉窗口的頁面）的key值設為1，子頁面（從主頁面跳轉到的其他頁面）的key值設為其他任意值，判斷key值是否為1，為1的時候點擊返回再關閉窗口。（注意：每次進到主頁面的時候都要將key值重置為1。
　　　因為session的生命周期是當前窗口，從其他頁面子頁面回到主頁面會改變key）
方案三：（替換方案）
在授權頁面加入活動方的宣傳廣告，避免空白。
方案四：（最優方案）
微信授權放在后臺進行，這樣就不會存在這個授權頁面，也就不用去考慮會出現空白的問題了。
更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。