微信內置瀏覽器點擊「返回」關閉窗口

時間 2019-11-07 標籤微信內置瀏覽器點擊返回關閉窗口

場景：開發微信內的H5活動，須要進行微信受權，咱們採用的是在一個靜態頁面（只有js，因此是個空白頁面）內進行受權，受權後再跳轉到活動主頁。前端

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

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

方案一：（不可行）session

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

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

方案二：（可行）url

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

 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）
方案三：（替換方案）
在受權頁面加入活動方的宣傳廣告，避免空白。
方案四：（最優方案）微信受權放在後臺進行，這樣就不會存在這個受權頁面，也就不用去考慮會出現空白的問題了。