如何用JavaScript检测页面变化、重定向URL及onbeforeunload失效问题

我来帮你搞定这两个技术需求，顺便解决你遇到的beforeunload事件绑定失效的问题～

1. 修复beforeunload事件绑定问题 #

你写的代码里有个关键错误：jQuery绑定事件时，事件名应该是beforeunload，而不是onbeforeunload（on前缀是原生JS直接赋值事件处理函数时用的）。另外，现代浏览器对beforeunload的自定义弹窗有严格限制，不能直接用alert()，必须返回一个字符串，浏览器会展示系统默认提示（可能会包含你返回的文本）。

修正后的完整HTML代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>Practice</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(window).on("beforeunload", function(e) {
      // 返回非空字符串触发浏览器的离开确认提示
      const tipMessage = "你确定要离开当前页面吗？";
      e.returnValue = tipMessage;
      return tipMessage;
    });
  </script>
</head>
<body>
  <!-- 页面内容 -->
  <a href="https://example.com">跳转测试链接</a>
</body>
</html>

这段代码在localhost环境下，刷新页面、点击外部链接或者关闭标签页时，都会触发浏览器的离开确认提示。

2. 检测页面变化的实现方案 #

页面变化分为两种核心场景，对应不同的实现方式：

场景1：检测DOM结构变化（元素增删改、属性/文本变化） #

可以使用原生的MutationObserver API，它是监听DOM变化的高效方案，比旧的DOMSubtreeModified事件性能更好：

// 选择要监听的目标节点（这里以body为例）
const targetNode = document.body;

// 配置观察选项，按需开启监听类型
const observeConfig = {
  attributes: true,        // 监听元素属性变化
  childList: true,         // 监听子节点的增删
  subtree: true,           // 监听所有后代节点
  characterData: true      // 监听文本内容变化
};

// 定义变化触发的回调函数
const changeCallback = function(mutationsList, observer) {
  for(let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('检测到DOM节点增删变化');
    } else if (mutation.type === 'attributes') {
      console.log(`元素属性 ${mutation.attributeName} 发生变化`);
    }
    // 根据需求添加自定义处理逻辑
  }
};

// 创建观察器实例并开始监听
const domObserver = new MutationObserver(changeCallback);
domObserver.observe(targetNode, observeConfig);

// 若需停止监听，可调用：domObserver.disconnect();

场景2：检测页面卸载/跳转（用户离开当前页面） #

就是我们刚才修复的beforeunload事件，它能在页面即将卸载时触发，适合监听用户刷新、关闭页面、跳转到其他URL的行为。

3. 检测将要重定向的目标URL #

这个需求要分不同跳转场景针对性处理：

场景1：用户点击页面内的<a>标签跳转 #

监听所有<a>标签的点击事件，提前获取目标URL，还可以额外验证是否会触发服务器重定向：

$(document).on('click', 'a', function(e) {
  const targetUrl = $(this).attr('href');
  console.log('将要跳转的目标URL:', targetUrl);

  // 可选：验证该URL是否会触发重定向
  fetch(targetUrl, { method: 'HEAD' })
    .then(response => {
      if (response.redirected) {
        console.log('实际重定向目标:', response.url);
      } else if (response.headers.get('Location')) {
        console.log('服务器返回的重定向目标:', response.headers.get('Location'));
      }
    })
    .catch(err => console.error('检测重定向失败:', err));
});

场景2：通过脚本或window.location触发的跳转 #

可以重写window.location.href的setter方法，监听主动触发的跳转行为：

const originalHrefSetter = Object.getOwnPropertyDescriptor(window.location, 'href').set;
Object.defineProperty(window.location, 'href', {
  set: function(value) {
    console.log('将要跳转的目标URL:', value);
    // 添加自定义逻辑后，执行原始跳转逻辑
    originalHrefSetter.call(this, value);
  },
  get: function() {
    return window.location.href;
  }
});

场景3：服务器端触发的自动重定向 #

这种情况无法在页面即将卸载时直接获取重定向目标，只能提前通过请求检测目标页面的响应头：

function checkRedirectTarget(url) {
  fetch(url, { method: 'HEAD' })
    .then(response => {
      // 3xx状态码代表重定向
      if (response.status >= 300 && response.status < 400) {
        const redirectUrl = response.headers.get('Location');
        console.log('服务器重定向目标:', redirectUrl);
      }
    })
    .catch(err => console.error('重定向检测失败:', err));
}

// 使用示例：检测当前页面是否会被重定向
checkRedirectTarget(window.location.href);

内容的提问来源于stack exchange，提问作者Computeshorts