使用事件偵聽器處理導航變更
當使用者導航到網頁中的新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中文網其他相關文章！
