能否用document.visibilityState检测URL变更？场景适配疑问

为什么visibilitychange不触发手动改URL的场景 #

visibilitychange 只负责监听页面可见性状态的切换，比如切标签页、浏览器最小化、刷新时页面短暂不可见的阶段。但手动修改URL并回车属于浏览器的页面卸载/导航行为，此时浏览器会直接开始卸载当前页面，不会触发可见性变更事件，所以你的代码捕捉不到这个操作。

是否该改用beforeunload？ #

答案是需要结合使用，而非单纯替换：

• 如果你的需求必须覆盖手动改URL、关闭标签页、浏览器后退这类页面卸载行为，beforeunload 是目前最直接的选择——这类操作本质都是页面即将被卸载，正好命中beforeunload的触发条件。
• 关于移动端表现：确实早期部分移动端浏览器对beforeunload的弹窗提示支持有差异，但目前主流移动端浏览器（Chrome Android、新版Safari iOS）已经基本支持事件的触发逻辑，只是部分浏览器会限制自定义弹窗（比如iOS Safari可能不显示你设置的提示文本，但事件本身会执行）。如果你的需求是执行数据保存而非弹出提示，这个限制基本不影响。

优化实现方案 #

同时监听两个事件，覆盖所有场景：

useEffect(() => {
  // 处理页面切换到后台、切标签等场景
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'hidden') {
      console.log('页面进入后台/切换标签');
      // 这里可以执行数据保存等逻辑
    }
  };

  // 处理手动改URL、刷新、关闭标签等页面卸载场景
  const handleBeforeUnload = (e) => {
    // 执行数据保存等必要逻辑
    // 注意：部分浏览器需要设置returnValue才能触发默认提示（可选）
    e.preventDefault();
    e.returnValue = '';
    return '';
  };

  document.addEventListener('visibilitychange', handleVisibilityChange);
  window.addEventListener('beforeunload', handleBeforeUnload);

  // 组件卸载时清理监听，避免内存泄漏
  return () => {
    document.removeEventListener('visibilitychange', handleVisibilityChange);
    window.removeEventListener('beforeunload', handleBeforeUnload);
  };
}, []);

补充说明 #

• 不要滥用beforeunload的弹窗提示：浏览器会对频繁弹出提示的网站进行限制，甚至直接忽略提示，所以尽量只在必要时使用。
• 非SPA场景下，router.events确实无法生效，因为路由完全由浏览器控制，没有前端路由的事件触发机制。

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