如何在 JavaScript 中檢測 URL 變更（包括哈希更改）？

在JavaScript 中使用雜湊檢測URL 變更

觀察URL 中的變更（包括雜湊符號後面的變更）對於使用AJAX的應用程式至關重要用於頁面更新。 JavaScript 提供了多個選項來追蹤 URL 變更。

事件處理程序

JavaScript 提供了可用於偵測URL 變更的事件處理程序：

• onload:
• onload:

onload:

onload:

> 該事件不適合偵測初始頁面後的URL變化load.

hashchange:

僅當雜湊符號後面的部分發生變化時才會觸發該事件，其他URL修改不會觸發。

手動檢查URL

(function() {
    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'));
    });
})();

定期輪詢 URL 是檢測更改的一種粗略但可靠的方法。然而，它需要一個持續的計時器，而且計算成本很高。

增強的歷史API現代瀏覽器支援導航API，它提供了專用的「導航」事件。每當位置發生變化時，無論原因為何（例如，pushState、replaceState、哈希更改），都會觸發此事件。 舊版瀏覽器的 Polyfill對於不支援的瀏覽器不支援導航API，可以實現以下修改後的歷史物件：此修改添加了自訂「locationchange」事件觸發所有歷史操作（pushState、replaceState、popstate）並允許附加事件偵聽器以檢測URL 更改。

以上是如何在 JavaScript 中檢測 URL 變更（包括哈希更改）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！