如何判断window.open()打开的窗口是否处于不同浏览器实例或被拖出原浏览器？

Great question! 要区分用window.open()打开的窗口是从原浏览器拖出来的（属于同一浏览器实例），还是完全独立的新浏览器实例，靠窗口大小确实不靠谱——毕竟拖出来后最大化就和父窗口一样大了。这里有几个更可靠的方案：

1. 使用 Broadcast Channel API（最通用） #

这个方法的核心逻辑是：同一浏览器实例下的所有窗口/标签页（包括拖出来的独立窗口）可以通过Broadcast Channel互相通信，而完全独立的浏览器实例（新进程）无法接收对方的广播消息。

实现步骤： #

• 父页面创建广播频道，在打开子窗口后发送验证消息：

  // 父页面代码
  const bc = new BroadcastChannel('window-instance-check');
  // 打开子窗口
  const childWindow = window.open('/your-child-page-url');
  
  // 延迟发送验证消息，确保子页面已加载
  setTimeout(() => {
    bc.postMessage({ type: 'verify-instance', timestamp: Date.now() });
  }, 1000);
  
  // 监听子页面的回复
  bc.onmessage = (event) => {
    if (event.data.type === 'verify-response') {
      console.log('子窗口属于同一浏览器实例（拖出或同窗口标签）');
    }
  };
  

• 子页面监听同一广播频道，收到验证消息后回复：

  // 子页面代码
  const bc = new BroadcastChannel('window-instance-check');
  bc.onmessage = (event) => {
    if (event.data.type === 'verify-instance') {
      // 回复父页面，确认同实例
      bc.postMessage({ type: 'verify-response' });
      
      // 也可以直接通过opener通知父页面（同域下可用）
      if (window.opener) {
        window.opener.postMessage('same-instance', '*');
      }
    }
  };
  

如果父页面在合理时间内没收到回复，基本可以判定子窗口是独立的浏览器实例。

2. 同域下用 window.opener 检查 #

如果你的父页面和子页面是同域的，这个方法更直接：

• 从父窗口打开的窗口（不管是同标签页、拖出来的窗口）都会保留window.opener引用，指向父窗口；
• 完全独立的浏览器实例打开的窗口，window.opener会是null。

实现代码： #

// 子页面代码
if (window.opener) {
  try {
    // 尝试访问父窗口的DOM（同域下无限制）
    const isSameInstance = !!window.opener.document;
    console.log('子窗口属于同一浏览器实例');
  } catch (error) {
    // 跨域场景下会触发同源策略错误，但opener存在说明是从父窗口打开的
    console.log('子窗口从父窗口打开，但跨域无法确认实例归属');
  }
} else {
  console.log('子窗口是独立的浏览器实例');
}

3. 同域下用 SharedWorker 计数 #

SharedWorker是同一浏览器实例下的同域页面共享的Worker，独立实例会创建新的SharedWorker。我们可以通过计数连接数来判断：

实现步骤： #

• 父/子页面连接到同一个SharedWorker：

  // 父/子页面代码
  const worker = new SharedWorker('instance-check-worker.js');
  worker.port.postMessage('connect');
  
  worker.port.onmessage = (event) => {
    if (event.data.type === 'connection-count') {
      // 如果连接数>=2，说明父和子在同一实例
      if (event.data.count >= 2) {
        console.log('同一浏览器实例');
      } else {
        console.log('独立浏览器实例');
      }
    }
  };
  

• 编写SharedWorker脚本（instance-check-worker.js）：

  // SharedWorker代码
  let connectionCount = 0;
  self.onconnect = (event) => {
    const port = event.ports[0];
    connectionCount++;
    // 向当前页面发送连接计数
    port.postMessage({ type: 'connection-count', count: connectionCount });
    
    port.onmessage = () => {
      // 可处理后续消息
    };
  };
  

注意事项 #

• 隐私模式/隐身窗口：这类窗口属于独立的会话，即使是同一浏览器，Broadcast Channel和SharedWorker也无法和普通窗口通信，会被判定为独立实例；
• 跨域限制：window.opener的DOM访问、SharedWorker都要求同域，跨域场景下优先用Broadcast Channel；
• 没有100%完美的方案：浏览器的进程模型（比如Chrome的多进程架构）可能有特殊情况，但上述方法在绝大多数常规场景下都能正常工作。

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