深入理解onpopstate

一、onpopstate詳解

onpopstate是一個HTML5新提供的事件，用於監聽頁面的前進後退操作。當用戶點擊瀏覽器的前進或後退按鈕時，會觸發onpopstate事件，調用對應的事件處理函數。因此，onpopstate事件也被稱為網頁的“前進後退監聽器”。

為了更好地使用onpopstate事件，我們需要了解它的一些相關信息。比如，onpopstate事件只有在瀏覽器歷史記錄中有兩個或者更多個記錄時才會被觸發。並且，onpopstate事件也只會在前進或後退以及history.go()或history.back()被調用時才會觸發，而不是在history.pushState()或history.replaceState()被調用時觸發。

window.addEventListener('popstate', function(event) {
    // 展示當前 history 對象中的 state
    console.log('state: ' + JSON.stringify(event.state));
});

二、onpopstate 挽留

在使用onpopstate事件時，我們可能會遇到一種比較棘手的問題：如何防止用戶誤操作退出頁面？這時，我們可以使用onbeforeunload事件來詢問用戶是否確認離開頁面。如果用戶選擇留在頁面，則不會觸發onpopstate事件，從而保證用戶不會誤操作離開頁面。

window.onbeforeunload = function() {
    return '確定要離開此頁面嗎？';
};

三、onpopstate觸發的條件

在使用onpopstate事件時，我們需要注意它的一些觸發條件。首先，如果當前頁面是通過重載頁面而進入的，那麼onpopstate事件就不會被觸發。只有在通過前進或後退按鈕、history.go()或history.back()等方式進入頁面時，才會觸發onpopstate事件。

其次，當我們使用pushState()或replaceState()等函數改變當前頁面的狀態時，雖然也會添加新的歷史記錄，但onpopstate事件並不會被觸發。因此，我們需要結合使用onpopstate和pushState()或replaceState()等函數，來實現網頁的前進後退跳轉。

四、onpopstate MDN

在使用onpopstate事件時，我們也可以參考MDN文檔，查看其詳細的介紹和使用方法。MDN文檔中也提供了一些示例代碼，方便我們進行使用和理解。

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

五、onpopstate怎麼區分go和back

當我們使用history.go()或history.back()等函數進行頁面跳轉時，同樣會觸發onpopstate事件。但是，如何區分用戶是點擊了瀏覽器的後退按鈕還是前進按鈕呢？可以通過判斷歷史記錄的長度變化來進行區分。如果歷史記錄長度增加了，則說明是前進操作；如果歷史記錄長度減少了，則說明是後退操作。

let currentUrl = location.href;
window.onpopstate = function(e) {
    let newUrl = location.href;
    console.log(currentUrl + ' ----> ' + newUrl);
    if (currentUrl.indexOf(newUrl) === -1) {
        console.log('前進');
    } else {
        console.log('後退');
    }
    currentUrl = newUrl;
};

六、小結

onpopstate事件是我們在網頁開發中經常會使用到的功能之一。通過深入理解onpopstate事件的觸發條件以及使用方法，我們可以更好地開發出具有前進後退功能的網頁，並且保障用戶的瀏覽穩定性和體驗。