問題描述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.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); 
});

到此這篇關於微信瀏覽器左上角返回按鈕監聽的實現的文章就介紹到這了,更多相關微信瀏覽器返回按鈕監聽內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！