如何从多个窗口获取HTML内容并写入新HTML页面？

当然可以实现这个需求！不过有个核心前提必须先明确：浏览器的同源策略限制——只有当所有窗口（window1、window2、window3）属于同一域名、协议和端口时，你才能直接访问它们的document对象获取内容。如果涉及跨域，就得用跨窗口通信的方案，我会分别给你讲两种场景的实现方法。

一、同源场景下的实现步骤 #

1. 保存已打开窗口的引用 #

首先，你需要把打开的window1和window2的引用保存下来，这样后续才能访问它们的内容。比如绑定到按钮点击事件上：

// 全局保存窗口引用
let window1, window2;

// 打开window1的函数（绑定到按钮点击）
document.getElementById('open-window1').addEventListener('click', () => {
  window1 = window.open('window1.html', 'window1');
});

// 打开window2的函数（绑定到按钮点击）
document.getElementById('open-window2').addEventListener('click', () => {
  window2 = window.open('window2.html', 'window2');
});

2. 等待窗口加载完成后获取内容 #

窗口打开后需要时间加载页面，直接获取内容可能会拿到空值，所以要监听窗口的load事件，同时也要处理窗口已经加载完成的情况：

// 获取两个窗口内容并创建window3
document.getElementById('merge-content').addEventListener('click', () => {
  // 检查窗口是否正常打开
  if (!window1 || window1.closed || !window2 || window2.closed) {
    alert('请先打开window1和window2！');
    return;
  }

  let content1, content2;

  // 监听window1加载完成
  window1.addEventListener('load', () => {
    content1 = window1.document.querySelector('p').innerHTML;
    content2 && createWindow3(content1, content2);
  });

  // 监听window2加载完成
  window2.addEventListener('load', () => {
    content2 = window2.document.querySelector('p').innerHTML;
    content1 && createWindow3(content1, content2);
  });

  // 处理窗口已提前加载完成的情况
  if (window1.document.readyState === 'complete') {
    content1 = window1.document.querySelector('p').innerHTML;
  }
  if (window2.document.readyState === 'complete') {
    content2 = window2.document.querySelector('p').innerHTML;
  }
  if (content1 && content2) createWindow3(content1, content2);
});

3. 修改你的window3创建代码，合并内容 #

基于你已有的代码，调整为接收两个段落内容并写入：

function createWindow3(para1, para2) {
  const tabOrWindow = window.open('', '_blank');
  
  // 写入合并后的HTML内容
  tabOrWindow.document.write(`<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>合并窗口</title>
</head>
<body>
<h3>来自window1的内容:</h3>
${para1}
<h3>来自window2的内容:</h3>
${para2}
</body>
</html>`);
  
  // 必须调用close()，确保窗口结束加载并渲染内容
  tabOrWindow.document.close();
}

二、跨域场景下的解决方案（如果window1/2来自其他域名） #

如果window1或window2不属于同一域名，浏览器会阻止你直接访问它们的document对象，这时候需要用postMessage来实现跨窗口通信：

1. 在window1/window2的页面中发送内容 #

比如在window1的HTML页面中添加以下代码：

// window1.html中的代码
window.addEventListener('load', () => {
  const para1 = document.querySelector('p').innerHTML;
  // 向打开当前窗口的父窗口发送消息（生产环境要指定具体域名，不要用*）
  window.opener.postMessage({
    type: 'window-content',
    source: 'window1',
    content: para1
  }, '*');
});

window2的页面做同样的修改，把source改成window2即可。

2. 在主窗口监听消息并收集内容 #

// 主窗口中的代码
const collectedContent = {};

window.addEventListener('message', (event) => {
  // 验证消息来源，防止恶意攻击（生产环境替换成实际的域名）
  if (!['https://window1-domain.com', 'https://window2-domain.com'].includes(event.origin)) {
    return;
  }

  // 收集内容
  if (event.data.type === 'window-content') {
    collectedContent[event.data.source] = event.data.content;
    
    // 当两个窗口的内容都收集完成，创建window3
    if (collectedContent.window1 && collectedContent.window2) {
      createWindow3(collectedContent.window1, collectedContent.window2);
      // 重置收集对象，方便下次使用
      Object.keys(collectedContent).forEach(key => delete collectedContent[key]);
    }
  }
});

关键注意事项 #

• 弹窗拦截：浏览器会拦截非用户主动触发的window.open，所以所有打开窗口的操作必须绑定到用户的点击事件（比如按钮点击）上。
• 窗口状态检查：要处理用户手动关闭window1/window2的情况，比如判断window1.closed是否为true。
• document.close()：写入完HTML内容后必须调用这个方法，否则新窗口会一直处于加载状态，无法正常渲染内容。

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