如何偵測 JavaScript 中哈希符號後的 URL 變化？

偵測JavaScript 中雜湊符號後的URL 變更

JavaScript 提供了偵測URL 是否已變更的方法，包括以下選項：

• Onload 事件：

  • 井號後面的URL 發生變化時不會觸發onload 事件。

• URL 的事件處理程序：

  • 沒有專門用於偵測 URL 變更的內建事件處理程序。

• 每秒檢查URL：

  • 雖然每秒不斷檢查URL 可能有效，但效率低下，可能會導致效能問題。

使用導航API（適用於現代瀏覽器）

主要瀏覽器現在支援導航API，它提供了更有效的方法來偵測URL 變更:

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

舊版瀏覽器的自訂事件

對於沒有導覽API 的舊版瀏覽器，可以透過修改歷史物件來建立自訂事件監聽器：

(() => {
    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 變更：

window.addEventListener("locationchange", function () {
    console.log("location changed!");
});

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