微信瀏覽器左上角返回按鈕監(jiān)聽(tīng)的實(shí)現(xiàn)方法

這篇文章主要介紹微信瀏覽器左上角返回按鈕監(jiān)聽(tīng)的實(shí)現(xiàn)方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

問(wèn)題描述1：

微信開(kāi)發(fā)的時(shí)候，在公眾號(hào)菜單中打開(kāi)一個(gè)H5頁(yè)面(如：個(gè)人中心)，在這個(gè)頁(yè)面上的一些操作，經(jīng)過(guò)多次跳轉(zhuǎn)后，點(diǎn)擊左上角的返回按鈕，發(fā)現(xiàn)會(huì)原封不動(dòng)的返回至上一級(jí)頁(yè)面。

即 公眾號(hào)菜單->A->B->C，點(diǎn)擊返回后，返回了B(且無(wú)刷新)，目的是要在C直接跳轉(zhuǎn)至A(公眾號(hào)菜單->A->B->C，C->A)，雖然可以在C上添加按鈕之類的操作進(jìn)行跳轉(zhuǎn)(公眾號(hào)菜單->A->B->C->A)，但當(dāng)點(diǎn)擊左上角返回按鈕后，依然是會(huì)返回C頁(yè)面，并且，也無(wú)法確保用戶不去點(diǎn)擊左上角的返回按鈕。

解決方式：

在C頁(yè)面中添加如下javascript代碼：

$(function(){ 
 pushHistory(); 

 window.addEventListener("popstate", function(e) { //回調(diào)函數(shù)中實(shí)現(xiàn)需要的功能
  alert("我監(jiān)聽(tīng)到了瀏覽器的返回按鈕事件啦"); 
  location.href='你要跳轉(zhuǎn)的鏈接'; //在這里指定其返回的地址
 }, false); 
}); 
function pushHistory() { 
 var state = { 
  title: "title", 
  url: "__SELF__" 
 }; 
 window.history.pushState(state, state.title, state.url); 
}

問(wèn)題描述2：

以上，解決了返回按鈕的監(jiān)聽(tīng)與控制，但是又出現(xiàn)了新的問(wèn)題，即當(dāng)從C->A后，點(diǎn)擊返回按鈕，依然會(huì)返回C頁(yè)面，目的是在A頁(yè)面點(diǎn)擊返回則關(guān)閉網(wǎng)頁(yè)返回至公眾號(hào)對(duì)話頁(yè)面。

解決方式：

PS：評(píng)論區(qū)中有人（@一路博客博主）指出新版微信jdk的關(guān)閉頁(yè)面api已經(jīng)改變，已在代碼中標(biāo)出
本人未親自測(cè)試，各位可以兩種方法都試試。

在A頁(yè)面中添加如下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);
}

問(wèn)題描述3：

在微信中進(jìn)入頁(yè)面就觸發(fā)了popstate事件。然后頁(yè)面會(huì)處于一直刷新?tīng)顟B(tài)。

解決方式：

定義boolean 變量bool=false。在頁(yè)面加載后，采用setTimeout方法設(shè)置1.5s的超時(shí)，在超時(shí)執(zhí)行方法中設(shè)置bool=true。

在popstate監(jiān)聽(tīng)當(dāng)中增加對(duì)bool的判斷，當(dāng)bool=true時(shí)，執(zhí)行內(nèi)容。
代碼如下：

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

以上是“微信瀏覽器左上角返回按鈕監(jiān)聽(tīng)的實(shí)現(xiàn)方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！