如何基于ReactJS实现浏览器标签页切换时弹出确认提示及页面锁定？

这需求其实挺常见的，比如考试系统或者重要表单页面，防止用户不小心切走。咱可以利用浏览器的visibilitychange API来监听页面是否被隐藏，再结合React的状态管理来弹出自定义的确认对话框，比依赖浏览器自带的提示更灵活。

下面是一个完整的功能实现组件，直接复制就能用：

import { useState, useEffect } from 'react';

const PageLock = () => {
  const [showConfirmModal, setShowConfirmModal] = useState(false);

  // 监听页面可见性变化
  useEffect(() => {
    const handleVisibilityChange = () => {
      // 当页面切换到后台（切标签/桌面）时，弹出提示
      if (document.hidden) {
        setShowConfirmModal(true);
      }
    };

    // 添加事件监听
    document.addEventListener('visibilitychange', handleVisibilityChange);

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

  // 处理确认操作
  const handleConfirm = () => {
    // 这里可以添加你需要的逻辑，比如允许用户离开
    setShowConfirmModal(false);
  };

  // 处理取消操作，将页面重新聚焦
  const handleCancel = () => {
    setShowConfirmModal(false);
    // 把浏览器标签页拉回前台
    window.focus();
  };

  return (
    <div>
      {/* 你的页面内容 */}
      <h1>当前锁定页面</h1>
      <p>切换到其他标签或桌面试试？</p>

      {/* 自定义确认模态框 */}
      {showConfirmModal && (
        <div style={modalOverlayStyle}>
          <div style={modalContentStyle} tabIndex={-1} autoFocus>
            <h3>Are you sure?</h3>
            <p>你即将离开当前页面，确定要继续吗？</p>
            <div style={buttonContainerStyle}>
              <button onClick={handleCancel} style={cancelButtonStyle}>
                取消
              </button>
              <button onClick={handleConfirm} style={confirmButtonStyle}>
                确定
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// 模态框样式
const modalOverlayStyle = {
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100vw',
  height: '100vh',
  backgroundColor: 'rgba(0, 0, 0, 0.5)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  zIndex: 9999,
};

const modalContentStyle = {
  backgroundColor: 'white',
  padding: '2rem',
  borderRadius: '8px',
  boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
  minWidth: '300px',
  textAlign: 'center',
};

const buttonContainerStyle = {
  marginTop: '1.5rem',
  display: 'flex',
  gap: '1rem',
  justifyContent: 'center',
};

const cancelButtonStyle = {
  padding: '0.5rem 1.5rem',
  border: '1px solid #ccc',
  borderRadius: '4px',
  backgroundColor: 'white',
  cursor: 'pointer',
};

const confirmButtonStyle = {
  padding: '0.5rem 1.5rem',
  border: 'none',
  borderRadius: '4px',
  backgroundColor: '#dc3545',
  color: 'white',
  cursor: 'pointer',
};

export default PageLock;

关键细节说明： #

• visibilitychange事件：这是浏览器原生API，当页面从可见变为隐藏（比如切标签、最小化窗口）时会触发，完美匹配需求场景。
• 自定义模态框：比起浏览器自带的window.confirm，自定义模态框样式更可控，也能避免部分浏览器对弹窗的限制。
• 页面聚焦逻辑：取消按钮点击后调用window.focus()，可以把用户强制拉回当前标签页，强化锁定效果。
• 内存泄漏防护：在useEffect的清理函数中移除事件监听，这是React组件开发的最佳实践。

额外补充： #

如果需要在用户关闭页面时也弹出提示，可以额外添加beforeunload事件监听，但要注意：大部分现代浏览器不允许自定义beforeunload的提示文案，只能使用浏览器默认的内容。如果需要的话，可以在useEffect里加上这段代码：

const handleBeforeUnload = (e) => {
  // 阻止默认行为
  e.preventDefault();
  // 必须设置returnValue才能触发提示（不同浏览器要求不同）
  e.returnValue = '';
};

document.addEventListener('beforeunload', handleBeforeUnload);

// 清理时也要移除这个监听
return () => {
  document.removeEventListener('visibilitychange', handleVisibilityChange);
  document.removeEventListener('beforeunload', handleBeforeUnload);
};

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