IOS 微信返回按鈕事件控制彈層關閉還是返回上一頁

 

在微信公共號內綁定域名后或微信內打開第三方鏈接跳轉非單頁面網站時，經常會有彈層Modal的需求，此時如果用戶習慣性點擊微信自帶的返回“<”按鈕，就會跳轉回上一頁或退出網站，而為了避免這種不好的誤操作，需要手動“監聽返回”，經過本人多次驗證場景可滿足有彈層時頁面按鈕返回和微信返回的雙方式都隱藏彈層Modal而不返回，而無彈層時可直接返回上一頁，下面就看代碼實現：

//打開彈層Modal
openModal = ()=>{
    //你的彈出彈層的代碼，如modal.show()之類的；

    //
    this.pushNewState();
    //添加監聽
    window.addEventListener("popstate", this.yourEventListener.bind(this), false);
}

//新push一個state
pushNewState = ()=>{
    var state = {title: "title", url: "#"};
    window.history.pushState(state, "", "");  
}

//監聽返回執行的函數
yourEventListener = (arg1,argN,...)=>{
    //移除監聽
    window.removeEventListener("popstate", this.yourEventListener.bind(this), false);
   //關閉你的彈層，如modal.hide()之類的語句

   //如果當前state等於新push的state則退一步state
   if (window.history.state != null) {
       window.history.back();
   }
}

以上就是全部實現代碼，需要注意兩點：

1、當彈層有自帶的關閉或隱藏按鈕時，應改寫其執行函數 或 使用自定義的按鈕並調用 this.yourEventListener(arg)來執行關閉彈層，否則隱藏彈層后頁面停留在新push的state，此時點返回需要點擊兩次才會有效；

2、在 this.yourEventListener 中添加debugger 調試會發現，如果多次彈層，即使使用了  window.removeEventListener("popstate", this.yourEventListener.bind(this), false); 在關閉彈層時依然會調用多次 this.yourEventListener 執行，目前不清楚為什么，希望有明白的可以留言討論下，但這並不影響使用效果。