1. 程式人生 > >微信瀏覽器左上角返回按鈕的監聽

微信瀏覽器左上角返回按鈕的監聽

問題描述1:

微信開發的時候,在公眾號選單中開啟一個H5頁面(如:個人中心),在這個頁面上的一些操作,經過多次跳轉後,點選左上角的返回按鈕,發現會原封不動的返回至上一級頁面。

即 公眾號選單->A->B->C,點選返回後,返回了B(且無重新整理),目的是要在C直接跳轉至A(公眾號選單->A->B->C,C->A),雖然可以在C上新增按鈕之類的操作進行跳轉(公眾號選單->A->B->C->A),但當點選左上角返回按鈕後,依然是會返回C頁面,並且,也無法確保使用者不去點選左上角的返回按鈕。

解決方式:

在C頁面中新增如下javascript程式碼:

$(function(){  
    pushHistory();  

    window.addEventListener("popstate", function(e) {  //回撥函式中實現需要的功能
        alert("我監聽到了瀏覽器的返回按鈕事件啦"); 
        location.href='你要跳轉的連結';  //在這裡指定其返回的地址
    }, false);  
});  
function pushHistory() {  
    var state = {  
        title: "title",  
        url: "__SELF__"
}; window.history.pushState(state, state.title, state.url); }

問題描述2:

以上,解決了返回按鈕的監聽與控制,但是又出現了新的問題,即當從C->A後,點選返回按鈕,依然會返回C頁面,目的是在A頁面點選返回則關閉網頁返回至公眾號對話頁面。

解決方式:

PS:評論區中有人(@一路部落格博主)指出新版微信jdk的關閉頁面api已經改變,已在程式碼中標出
本人未親自測試,各位可以兩種方法都試試。

在A頁面中新增如下javascript程式碼:

$(function(){
    pushHistory();

    window.addEventListener("popstate"
, function(e) { // 新版中使用wx.closeWindow()方法 WeixinJSBridge.call('closeWindow'); }, false); }); function pushHistory() { var state = { title: "myCenter", url: "__SELF__" }; window.history.pushState(state, state.title, state.url); }

問題描述3:

在微信中進入頁面就觸發了popstate事件。然後頁面會處於一直重新整理狀態。

解決方式:

定義boolean 變數bool=false。在頁面載入後,採用setTimeout方法設定1.5s的超時,在超時執行方法中設定bool=true。

在popstate監聽當中增加對bool的判斷,當bool=true時,執行內容。
程式碼如下:

$(function(){  
    pushHistory();  
    var bool=false;  
    setTimeout(function(){  
        bool=true;  
    },1500);  
    window.addEventListener("popstate", function(e) {  
        if(bool){  
            alert("我監聽到了瀏覽器的返回按鈕事件啦");
        } 
    }, false);  
});