如何解决浏览器控制台打开新窗口后无法访问其对象的问题？

问题原因 #

localhost:3000和localhost:8000属于不同源（浏览器同源策略中，协议、域名、端口三者任一不同即为不同源），因此直接访问新窗口的DOM对象会被浏览器安全机制拦截，导致newWin显示Restricted，document.URL停留在about:blank。

可行实现方案：用window.postMessage跨源通信 #

由于两个域名均由你持有，可以通过postMessage安全地在窗口间传递数据，实现原窗口获取新窗口的innerHTML。

步骤1：原窗口（localhost:3000）React组件代码 #

import { useEffect } from 'react';

function CrossWindowComponent() {
  useEffect(() => {
    // 打开新窗口
    const newWin = window.open('http://localhost:8000', '_blank', 'width=1000,height=800');
    if (!newWin) return;

    // 监听新窗口发来的消息
    const receiveMessage = (event) => {
      // 验证消息来源，仅处理可信的localhost:8000
      if (event.origin !== 'http://localhost:8000') return;
      console.log('新窗口innerHTML:', event.data);
      // 这里可对innerHTML做后续处理
    };
    window.addEventListener('message', receiveMessage);

    // 等待新窗口加载完成后发送请求
    const checkLoadStatus = setInterval(() => {
      if (newWin.document.readyState === 'complete') {
        // 向新窗口发送获取innerHTML的请求
        newWin.postMessage('requestInnerHTML', 'http://localhost:8000');
        clearInterval(checkLoadStatus);
      }
    }, 100);

    // 组件卸载时清理监听和定时器
    return () => {
      window.removeEventListener('message', receiveMessage);
      clearInterval(checkLoadStatus);
    };
  }, []);

  return <div>原窗口操作区</div>;
}

export default CrossWindowComponent;

步骤2：新窗口（localhost:8000）页面配置 #

在新窗口的HTML文件（如public/index.html）中添加以下脚本，监听原窗口的请求并返回innerHTML：

<script>
window.addEventListener('message', (event) => {
  // 验证消息来源为可信的localhost:3000
  if (event.origin !== 'http://localhost:3000') return;
  // 收到获取innerHTML的请求后返回数据
  if (event.data === 'requestInnerHTML') {
    event.source.postMessage(document.documentElement.innerHTML, event.origin);
  }
});
</script>

注意事项 #

• 必须严格验证event.origin，避免接收不可信来源的消息，防止安全风险。
• 需确保新窗口完全加载后再发送请求，否则可能无法正确获取DOM内容。

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