如何检测聊天目标网页是否已处于打开状态？

方法一：复用窗口并保存引用（无需修改聊天网站） #

这是最直接的方案，利用window.open的窗口名称特性，配合全局引用检测窗口状态：

1. 在主网站全局保存窗口引用：

let chatWindow = null;

2. 点击消息时的处理逻辑：

function openChat(chatUrl) {
  // 检查窗口是否存在且未关闭
  if (chatWindow && !chatWindow.closed) {
    chatWindow.focus(); // 切换到已打开的聊天窗口
  } else {
    // 打开新窗口并固定名称（相同名称会复用窗口）
    chatWindow = window.open(chatUrl, 'fixedChatWindowName');
  }
}

核心是第二个参数fixedChatWindowName必须固定，重复调用window.open会复用同一个标签页，而非新建。同时通过chatWindow.closed判断窗口是否被用户手动关闭。

方法二：结合本地存储标记状态（需修改聊天网站） #

通过sessionStorage标记聊天窗口的打开状态，配合页面卸载事件更新状态：

1. 聊天网站添加状态标记逻辑：

// 页面加载时标记窗口已打开
sessionStorage.setItem('chatWindowActive', 'true');

// 窗口关闭时清除标记
window.addEventListener('beforeunload', () => {
  sessionStorage.removeItem('chatWindowActive');
});

2. 主网站点击消息时检查状态：

function openChat(chatUrl) {
  const isChatOpen = sessionStorage.getItem('chatWindowActive') === 'true';
  const chatWin = window.open(chatUrl, 'fixedChatWindowName');
  
  if (isChatOpen && chatWin) {
    chatWin.focus();
  }
}

注意：如果用户手动在其他标签页打开聊天网站，可能导致标记冲突，建议和方法一的固定窗口名称结合使用。

方法三：跨标签通信检测（需修改聊天网站） #

利用Broadcast Channel API实现主网站和聊天网站的跨标签通信，准确获取窗口状态：

1. 主网站代码：

const chatChannel = new BroadcastChannel('chatStatusChannel');
let isChatWindowOpen = false;

// 监听聊天网站的状态回复
chatChannel.addEventListener('message', (event) => {
  if (event.data.type === 'status') {
    isChatWindowOpen = event.data.isOpen;
  }
});

function openChat(chatUrl) {
  // 发送状态查询请求
  chatChannel.postMessage({ type: 'checkStatus' });
  
  setTimeout(() => {
    const chatWin = window.open(chatUrl, 'fixedChatWindowName');
    if (isChatWindowOpen && chatWin) {
      chatWin.focus();
    }
  }, 100);
}

2. 聊天网站代码：

const chatChannel = new BroadcastChannel('chatStatusChannel');

// 响应主网站的状态查询
chatChannel.addEventListener('message', (event) => {
  if (event.data.type === 'checkStatus') {
    chatChannel.postMessage({ type: 'status', isOpen: true });
  }
});

// 窗口关闭时通知主网站
window.addEventListener('beforeunload', () => {
  chatChannel.postMessage({ type: 'status', isOpen: false });
});

这种方案状态检测更准确，但前提是你拥有聊天网站的代码修改权限。

内容的提问来源于stack exchange，提问作者Duy Nguyễn Bá