如何访问跨域iframe的DOM？

嘿，这个问题我太熟了！你说的没错，浏览器的同源策略确实把跨域iframe的DOM访问给卡得死死的，但Puppeteer作为Chrome官方亲儿子的Headless工具，确实有办法直接搞定——根本不用先模拟点击那么麻烦。

核心原因很简单：Puppeteer是通过DevTools协议直接和Chrome内核对话的，它能直接进入iframe的执行上下文，就像你在Chrome调试器里手动切换到iframe的控制台一样，这时候同源策略的限制对它来说根本不生效。

给你一套具体的操作步骤：

• 首先启动Puppeteer，打开目标页面：
  可以开headless: false方便你直观看到操作过程，代码如下：

  const puppeteer = require('puppeteer');
  
  (async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('你的主页面URL');
  

• 等待iframe加载完成并获取它的frame对象：
  你可以通过iframe的URL关键词、名称或者关联的选择器来定位它，用URL匹配通常最靠谱，避免选择器变化的问题：

  // 等待iframe出现，匹配URL里包含跨域域名的部分
    const iframe = await page.waitForFrame(frame => 
      frame.url().includes('https://你的跨域iframe域名.com')
    );
  

• 直接在iframe的上下文里操作DOM：
  用iframe.evaluate()方法，里面的代码就像直接在iframe的页面里运行一样，随便访问、修改DOM都没问题：

  // 示例1：获取iframe的页面标题
    const iframeTitle = await iframe.evaluate(() => document.title);
    console.log('iframe的标题是:', iframeTitle);
  
    // 示例2：修改iframe里的DOM内容
    await iframe.evaluate(() => {
      const header = document.querySelector('h1');
      if (header) header.textContent = '被Puppeteer修改啦！';
    });
  
    await browser.close();
  })();
  

这里还要给你提两个小注意点：

• 如果你的iframe是动态加载的（比如点击某个按钮才会出现），那你得先模拟完成触发加载的动作，再用waitForFrame去捕获它。
• 完全不需要加--disable-web-security这类禁用安全策略的参数，因为我们不是从主页面的JS去跨域访问iframe，而是直接在iframe自己的执行环境里跑代码，完全符合浏览器调试工具的权限逻辑，安全又靠谱。

要是遇到多层嵌套的iframe，也可以用iframe.childFrames()去获取子iframe，操作逻辑和上面完全一致。

备注：内容来源于stack exchange，提问作者UsAA12