使用window.open()获取新窗口document.body失败的技术求助

核心原因 #

你用window.open()获取跨域页面内容的方法根本走不通，问题出在浏览器同源策略：只要新打开的页面和当前页面域名、协议、端口任一不一致，浏览器就会完全禁止你访问该窗口的document、DOM元素等核心对象，不管用innerHTML还是innerText都拿不到内容——这是浏览器的强制安全限制，没有前端层面的绕过方法。

可行替代方案 #

1. 后端代理（最通用的解决办法） #

自己搭建一个简单的后端服务，由后端发起GET请求目标URL，再把获取到的HTML返回给前端。后端不受CORS限制，完全能拿到页面内容。

比如用Node.js + Express快速实现：

const express = require('express');
const axios = require('axios');
const app = express();

// 代理接口，接收目标URL作为参数
app.get('/get-html', async (req, res) => {
  const targetUrl = req.query.url;
  if (!targetUrl) {
    return res.status(400).send('缺少目标URL参数');
  }
  try {
    const response = await axios.get(targetUrl);
    res.send(response.data);
  } catch (error) {
    res.status(500).send(`请求失败：${error.message}`);
  }
});

app.listen(3000, () => {
  console.log('代理服务已启动，端口3000');
});

前端只需要请求这个接口，传入目标URL就能拿到HTML：

fetch(`http://localhost:3000/get-html?url=${encodeURIComponent('目标IG Reels链接')}`)
  .then(res => res.text())
  .then(html => {
    // 这里拿到的就是目标页面的HTML
    console.log(html);
  });

2. 调用官方API（针对IG Reels） #

如果目标是Instagram Reels，优先考虑使用Instagram官方的Graph API。申请开发者权限后，可以合法获取Reels的元数据、内容等信息，比直接爬HTML更稳定，也不会触发平台的反爬机制。

注意事项 #

不要尝试用iframe、脚本注入等前端手段绕开同源策略，浏览器的安全机制会直接拦截这类操作，只会触发安全报错，没有实际作用。

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