同时打开两个浏览器页面，关闭 A 页面的时候，要求 B 页面同时关闭，怎么实现？

你在一个 React 项目中：

• 用户打开了 两个浏览器标签页 / 窗口：页面 A 和页面 B

• 你希望在 用户关闭页面 A 时，自动关闭页面 B

---

浏览器出于安全考虑，不允许网页随意关闭用户手动打开的标签页 ，但允许关闭 由当前页面通过 window.open()打开的窗口。

所以，可行的前提一般是：页面 B 是由页面 A 打开的（即存在 window.open的上下文关系） ，或者通过某种 跨页面通信机制去协调两者的关闭行为。

---

✅ 方法 1：页面 A 通过 window.open()打开页面 B，保存引用，在 A 关闭时调用 B.close()

这是最直接、最可控的方案，前提是 B 是由 A 打开的。

🧩 实现步骤：

1. 页面 A（比如首页 / 主页）通过 window.open()打开页面 B，并保存返回的窗口对象（如 pageBWindow）

2. 在页面 A 监听关闭事件，比如 beforeunload，在 A 关闭前调用 pageBWindow.close()

3. 页面 B 可选择性监听 A 的关闭（通过 window.opener），实现双向控制（可选）

---

✅ 页面 A 的代码（React 组件中）

// APage.tsx 或 APage.jsx
import React, { useEffect, useRef } from 'react';

const APage = () => {
  const pageBRef = useRef<Window | null>(null);

  useEffect(() => {
    // 打开页面 B，并保存 window 对象
    pageBRef.current = window.open('/b-page', '_blank'); // 假设 B 页面路由是 /b-page

    const handleBeforeUnload = () => {
      if (pageBRef.current && !pageBRef.current.closed) {
        pageBRef.current.close(); // 尝试关闭 B 页面
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  return <div>这是页面 A，我打开了页面 B，关闭我时 B 也会关闭。</div>;
};

export default APage;

---

✅ 页面 B 的代码（可监听 A 关闭，可选）

// BPage.tsx
import React, { useEffect } from 'react';

const BPage = () => {
  useEffect(() => {
    const opener = window.opener;
    if (opener) {
      const handleBeforeUnload = () => {
        if (opener && !opener.closed) {
          opener.close(); // 可选：B 关闭时也尝试关闭 A
        }
      };

      window.addEventListener('beforeunload', handleBeforeUnload);

      return () => {
        window.removeEventListener('beforeunload', handleBeforeUnload);
      };
    }
  }, []);

  return <div>这是页面 B，我由页面 A 打开，A 关闭时我也会被关闭。</div>;
};

export default BPage;

---

✅ 方法 2：使用 BroadcastChannel 实现跨页面通信（推荐，纯前端，无需 window.open）

如果两个页面都是用户手动打开的（不是通过 window.open），但仍希望它们能通信（比如 A 关闭时通知 B 自己关闭），可以使用 BroadcastChannel实现跨标签页消息通信。

---

🧩 原理：

• BroadcastChannel允许同源的不同浏览器标签页之间广播消息

• 页面 A 可以发送一条 "我即将关闭" 的消息

• 页面 B 监听到后，调用 window.close()

---

✅ 页面 A 的代码（发送关闭消息）

// APage.tsx
import React, { useEffect } from 'react';

const APage = () => {
  useEffect(() => {
    const channel = new BroadcastChannel('page_channel');

    const handleBeforeUnload = () => {
      channel.postMessage({ type: 'CLOSE_B' }); // 发送关闭 B 的信号
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
      channel.close();
    };
  }, []);

  return <div>页面 A：我通过 BroadcastChannel 通知 B 我要关闭了。</div>;
};

---

✅ 页面 B 的代码（监听消息并关闭自己）

// BPage.tsx
import React, { useEffect } from 'react';

const BPage = () => {
  useEffect(() => {
    const channel = new BroadcastChannel('page_channel');

    const handleMessage = (event: MessageEvent) => {
      if (event.data?.type === 'CLOSE_B') {
        window.close(); // 收到消息，尝试关闭自己
      }
    };

    channel.addEventListener('message', handleMessage);

    return () => {
      channel.removeEventListener('message', handleMessage);
      channel.close();
    };
  }, []);

  return <div>页面 B：我监听来自 A 的关闭信号，收到就关闭自己。</div>;
};

---

✅ 方法 3：使用 localStorage 或 sessionStorage 事件（storage event）跨页面通信

原理：当页面 A 即将关闭时，设置一个标志到 localStorage，页面 B 监听 storage 事件，发现标志后执行关闭操作。

⚠️ 注意：localStorage的修改会触发其他同源页面的 storage事件，但当前页面修改自己不会触发！

---

✅ 页面 A（设置关闭标志）

// APage.tsx
import React, { useEffect } from 'react';

const APage = () => {
  useEffect(() => {
    const handleBeforeUnload = () => {
      localStorage.setItem('shouldCloseB', 'true');
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  return <div>页面 A：我通过 localStorage 通知 B 我要关闭了。</div>;
};

---

✅ 页面 B（监听 storage 事件，发现标志后关闭自己）

// BPage.tsx
import React, { useEffect } from 'react';

const BPage = () => {
  useEffect(() => {
    const handleStorageChange = (event: StorageEvent) => {
      if (event.key === 'shouldCloseB' && event.newValue === 'true') {
        localStorage.removeItem('shouldCloseB'); // 清理
        window.close(); // 尝试关闭自己
      }
    };

    window.addEventListener('storage', handleStorageChange);

    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, []);

  return <div>页面 B：我监听 localStorage，发现 A 要关闭我就关闭自己。</div>;
};

---

✅ 方法 4：使用 Service Worker + 消息推送（高级，不常用）

如果你的项目使用了 Service Worker（PWA 应用） ，理论上可以通过 postMessage 在 SW 和页面间通信 ，进而控制页面行为，但这种方式 复杂且不直观，一般不推荐仅仅为了关闭页面而使用。

---

✅ 方法 5：使用 WebSocket 或实时通信（适用于在线协作类应用）

如果两个页面都是在线用户并且连接到同一个 WebSocket 服务，那么：

• 页面 A 可以通过 WebSocket 发送"我要关闭"的消息

• 页面 B 收到后调用 window.close()

适用于多用户、多设备协同场景，但 过于复杂，仅适用于特定业务需求。

方法	是否需要 window.open	是否需要同源	通信方式	推荐程度	适用场景
✅ 方法 1：window.open + 引用 + close()	✅ 是	✅ 最好同源	直接调用 window.close()	⭐⭐⭐⭐⭐	B 是 A 打开的，最直接可靠
✅ 方法 2：BroadcastChannel	❌ 否	✅ 同源	消息广播	⭐⭐⭐⭐	两个页面都是用户打开的，需要通信
✅ 方法 3：localStorage + storage 事件	❌ 否	✅ 同源	事件通知	⭐⭐⭐	简单通知，但注意事件触发机制
⚠️ 方法 4：Service Worker	❌ 否	✅ 同源	消息推送	⭐⭐	过于复杂，一般不推荐
⚠️ 方法 5：WebSocket	❌ 否	✅ 同源/跨域	实时通信	⭐⭐	适用于多用户协同，不推荐仅用于关闭

---

✅ 五、最佳实践推荐（React 项目）

场景	推荐方案
✅ B 是由 A 打开的（比如点击按钮打开新页面）	使用方法 1：window.open()保存引用，A 关闭时调用 B.close()（最直接、最可靠）
✅ A 和 B 都是用户手动打开的，但希望它们互相通信	使用方法 2：BroadcastChannel（简单、强大、同源支持良好）
✅ 不想用 window.open，也不想用 Channel，只想简单通知	使用方法 3：localStorage 事件（注意限制）