同时打开两个浏览器页面，关闭 A 页面的时候，要求 B 页面同时关闭，怎么实现？
你在一个 React 项目中：
用户打开了 两个浏览器标签页 / 窗口：页面 A 和页面 B
你希望在 用户关闭页面 A 时，自动关闭页面 B
浏览器出于安全考虑，不允许网页随意关闭用户手动打开的标签页，但允许关闭 由当前页面通过 window.open()打开的窗口。
所以，可行的前提一般是：页面 B 是由页面 A 打开的（即存在 window.open的上下文关系），或者通过某种 跨页面通信机制去协调两者的关闭行为。
✅ 方法 1：页面 A 通过 window.open()打开页面 B，保存引用，在 A 关闭时调用 B.close()
这是最直接、最可控的方案，前提是 B 是由 A 打开的。
🧩 实现步骤：
页面 A（比如首页 / 主页）通过
window.open()打开页面 B，并保存返回的窗口对象（如pageBWindow）在页面 A 监听关闭事件，比如
beforeunload，在 A 关闭前调用pageBWindow.close()页面 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-pageconst 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： |
✅ A 和 B 都是用户手动打开的，但希望它们互相通信 | 使用方法 2：BroadcastChannel（简单、强大、同源支持良好） |
✅ 不想用 window.open，也不想用 Channel，只想简单通知 | 使用方法 3：localStorage 事件（注意限制） |