如何使用 JavaScript 檢測和處理網頁中的導航變更？

使用事件偵聽器處理導航變更

當使用者導航到網頁中的新URL 時，擷取事件可能具有挑戰性並造訪新載入頁面的DOM。為了解決這個問題，我們將探索使用 JavaScript 強大的觀察者 API 的解決方案。

觀察 DOM 突變
我們可以利用 MutationObserver 來監視 DOM 變化，而不是依賴逾時或輪詢DOM 樹。透過觀察元素，我們可以偵測到頁面內容何時因 location.href 變更而被修改。

範例實作
這裡有一個程式碼片段，示範如何使用MutationObserver 來監視視窗.location.href 變更：

<code class="javascript">var oldHref = document.location.href;

window.onload = function() {
    var bodyList = document.querySelector('body');

    var observer = new MutationObserver(function(mutations) {
        if (oldHref != document.location.href) {
            oldHref = document.location.href;
            /* Changed ! your code here */
        }
    });
    
    var config = {
        childList: true,
        subtree: true
    };
    
    observer.observe(bodyList, config);
};</code>

最新JavaScript 規格
在現代JavaScript 中，您可以使用箭頭函數和稍微簡化的語法來實現相同的功能：

<code class="javascript">const observeUrlChange = () => {
  let oldHref = document.location.href;
  const body = document.querySelector('body');
  const observer = new MutationObserver(mutations => {
    if (oldHref !== document.location.href) {
      oldHref = document.location.href;
      /* Changed ! your code here */
    }
  });
  observer.observe(body, { childList: true, subtree: true });
};

window.onload = observeUrlChange;</code>

透過使用這種事件驅動的方法，您可以避免輪詢或逾時，並以高效且可靠的方式捕獲URL 變更。這使您能夠存取新載入頁面的 DOM，並在使用者在同一網頁內導航時執行所需的操作。

以上是如何使用 JavaScript 檢測和處理網頁中的導航變更？的詳細內容。更多資訊請關注PHP中文網其他相關文章！