首頁 > web前端 > js教程 > 如何在 JavaScript 中偵測哈希後的 URL 變更?

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

Susan Sarandon
發布: 2024-11-25 05:53:14
原創
187 人瀏覽過

How Can I Detect URL Changes After the Hash in JavaScript?

在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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板