如何偵測 JavaScript 中的 URL 變化？

如何使用事件偵聽器偵測JavaScript 中的URL 變更

監視URL 變更對於許多JavaScript 應用程式至關重要，特別是那些使用AJAX 和單一- 頁面架構。在本文中，我們將研究可用於偵測 URL 變更的各種方法，並探索最有效的方法。

URL 變更的事件處理程序

有多個事件處理程序可用於追蹤 JavaScript 中的 URL 變更。最常見的包括：

• 'hashchange' 事件：監視 URL 中「#」符號後面部分的變化。
• 'popstate'事件：當使用瀏覽器的後退或前進按鈕或修改歷史物件時（例如，透過pushState或replaceState）啟動。

這些事件處理程序提供了可靠的方式來偵測 URL 變化，但它們有其限制。 'hashchange' 事件僅在 '#' 後面的片段發生更改時觸發，而 'popstate' 事件可能並不總是可靠地觸發。

用於全面 URL 監控的自訂事件

為了克服現有事件處理程序的限制，可以建立自訂事件來監視所有 URL 變更。透過修改歷史對象，我們可以確保每次透過pushState、replaceState或popstate事件更新URL時都會觸發自訂的「locationchange」事件。

以下是實作自訂事件的程式碼：

(() => {
    let oldPushState = history.pushState;
    history.pushState = function pushState() {
        let ret = oldPushState.apply(this, arguments);
        window.dispatchEvent(new Event('pushstate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    };

    let oldReplaceState = history.replaceState;
    history.replaceState = function replaceState() {
        let ret = oldReplaceState.apply(this, arguments);
        window.dispatchEvent(new Event('replacestate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    };

    window.addEventListener('popstate', () => {
        window.dispatchEvent(new Event('locationchange'));
    });
})();

透過此修改，您現在可以為 'locationchange' 事件新增事件偵聽器，以可靠地偵測任何 URL 變更。

結論

利用事件處理程序或實作自訂事件提供了監視 JavaScript 中 URL 變更的有效方法。每種方法都有其自身的優點和限制。透過了解這些選項並根據具體要求選擇最合適的方法，開發人員可以確保他們的應用程式有效回應 URL 變更。

以上是如何偵測 JavaScript 中的 URL 變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！