能否获取通过window.open方法打开的网页的HTML内容？

核心问题 #

你的代码触发了同源策略限制：当通过window.open打开https://www.example.com时，新窗口域名和当前页面域名不同，浏览器会禁止父页面访问子页面的DOM内容。myWindow.document.body.innerHTML这行代码会直接抛出跨域错误，导致后续displayContent函数根本不会执行，自然看不到日志和内容更新。

修复方案 #

浏览器同源策略是安全机制，无法直接绕过，可通过以下两种方式处理：

• 使用同域页面测试：把window.open的目标地址换成当前页面的同域页面（比如本地HTML文件），就能正常访问子页面DOM内容。修改后的JavaScript代码：

async function navigate() {
  // 替换为同域页面地址，比如本地的test.html
  const myWindow = window.open("./test.html", "", "width=100,height=100");

  myWindow.onload = function() {
    const innerContent = myWindow.document.body.innerHTML;
    displayContent(innerContent);
  };
}

function displayContent(content) {
  console.log(content)
  const contentDisplay = document.getElementById("content-display");
  contentDisplay.innerHTML = content;
}

• 通过postMessage实现跨域通信：如果必须访问跨域页面，需在目标页面添加监听message事件的代码，主动向父页面发送内容。
  父页面修改后的代码：

async function navigate() {
  const myWindow = window.open("https://www.example.com", "", "width=100,height=100");

  // 监听子页面发送的消息
  window.addEventListener("message", function(event) {
    // 验证消息来源，确保安全
    if (event.origin === "https://www.example.com") {
      displayContent(event.data);
    }
  });
}

function displayContent(content) {
  console.log(content)
  const contentDisplay = document.getElementById("content-display");
  contentDisplay.innerHTML = content;
}

目标页面（example.com）需添加的代码：

// 页面加载完成后向父页面发送内容
window.onload = function() {
  window.opener.postMessage(document.body.innerHTML, "*");
};

额外提示 #

按F12打开浏览器控制台，能看到跨域相关的错误提示，这是排查这类问题的关键步骤。

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