如何在 JavaScript 中偵測哈希後的 URL 變更？

在JavaScript 中偵測雜湊後的URL 變更

使用基於AJAX 的網站（如GitHub）時，可以確定URL 是否已更改至關重要的。 JavaScript 允許使用不同的方法來監控 URL 變更。

偵測URL 變更的選項：

• onload 事件： 僅觸發此事件當頁面完全重新載入時，因此不適合檢測部分URL
• URL 事件處理程序： JavaScript不為 URL 變更提供直接事件處理程序。
• 定期URL 檢查： 不斷檢查URL每一秒都可能是資源密集的

改進方法：Navigation API (2024)

現代瀏覽器現在支援Navigation API，它提供了更有效的方法來偵測URL更改。它的工作原理如下：

window.navigation.addEventListener("navigate", (event) => {
  console.log('location changed!');
});

替代方法（預導航 API）

如果導航 API不可用，可以使用自訂方法以下程式碼：

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

此解決方案修改歷史物件以新增功能，允許建立自訂事件聽眾，例如：

window.addEventListener('locationchange', () => {
    console.log('location changed!');
});

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