監聽瀏覽器的後退事件

晴雨稀兮發表於2019-02-16
瀏覽器事件

1.window的popstate事件

監聽瀏覽器回退事件，主要依賴於監聽：window的popstate事件，因為瀏覽器在被點選“後退”或者“前進”按鈕時，都會觸發popstate事件。
因此，可以在

window.on(`popstate`, function(){
    // to do
})

2.window的pushState事件

window的pushState事件，是實現往瀏覽器的歷史記錄中新增記錄，但是不重新整理當前頁面的功能，即沒有發生任何請求導致window.location.href發生變化。此方法有三個引數，分別是：

state：要新新增的記錄的狀態，是個物件
title：新頁面的title，可以為空
href：新頁面的url

3. 監聽瀏覽器後退的實現

3.1 將當前頁面的URL後面加
 $(document).ready(function (e) {
        if (window.history && window.history.pushState) {
            $(window).on(`popstate`, function () {
                self.location="/credit/miniprogram/copartner/bankList"; //如查需要跳轉頁面就用它
            });
        }
        window.history.pushState(`forward`, null, `#`); //在IE中必須得有這兩行
        window.history.forward(1);
    });
3.2 將當前頁面壓入歷史記錄中
  "pushState" in window.history && (
    window.history.pushState({
        title: document.title,
        url: location.href
    }, document.title, location.href),
      //setTimeout(function () {
          window.addEventListener("popstate", function (a) {
            self.location="/credit/miniprogram/copartner/bankList";                    
          })
      //})
    );

PS: 不是特別明白pushState的作用，這裡只是程式碼的搬運工，記錄一下，後續修改吧。

相關文章