Puppeteer 和动态添加的 iFrame（元素）答案

【问题标题】：Puppeteer and dynamically added iFrame (element)Puppeteer 和动态添加的 iFrame（元素）
【发布时间】：2021-04-06 20:52:30
【问题描述】：

我们有一个 angularJs 应用程序，它在按下按钮时弹出一个模态表单（组件）。
这个组件加载了一个 iFrame，我似乎无法使用 Puppeteer 访问它。
已尝试使用 mainFrame。

    await page.waitFor(15000);
    const frame = page.mainFrame().childFrames().find((iframe) => {
      console.log('FRAME', iframe.name(), iframe.url());
      return iframe.name() === 'iFrameName';
    });

上面只有一个框架（主框架/窗口）。

已尝试使用框架

    await page.waitFor(15000);
    const frame = page.frames().find((iframe) => {
      console.log('FRAME', iframe.name(), iframe.url());
      return iframe.name() === 'iFrameName';
    });

已尝试使用 contentFrame

    await page.waitForSelector('iframe', { visible: true, timeout: 2000 });
    const elementHandle = await page.$('iframe');
    await page.waitFor(1000);
    const frame = await elementHandle.contentFrame();

通过上述，elementHandle 有一个值，但 frame 为空

我们与 Protractor 合作，希望转向 Puppeteers，但如果没有解决方案将不得不坚持使用 Protractor（它还有其他问题）

【问题讨论】：

标签： javascript protractor puppeteer

【解决方案1】：

目前不支持out-of-process iframes (OOPIFs)。为了能够与他们合作，您需要使用 --disable-features=site-per-process 启动 Chromium：

const browser = await puppeteer.launch({
        args: ['--disable-features=site-per-process']
    });

您可以跟踪 puppeteer 的问题/支持here。

【讨论】：

【解决方案2】：

我也有类似的问题，动态调用了一个iframe，让src=(unknown)用一个JS

href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(VARİABLES,,true,,false,))

是否可以通过在 puppeteer 中调用 js 来克隆 The 或 iframe？如果有，你可以试试。

【讨论】：