如何使用 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中文网其他相关文章！