34

我必须填写 iframe 内的表格，这里是示例页面。我无法通过简单地使用page.focus()and访问page.type()。我试图通过使用来获取表单 iframe const formFrame = page.mainFrame().childFrames()[0]，它可以工作，但我不能真正与表单 iframe 交互。

4

4 回答 4

47

我自己想通了。这是代码。

console.log('waiting for iframe with form to be ready.');
await page.waitForSelector('iframe');
console.log('iframe is ready. Loading iframe content');

const elementHandle = await page.$(
    'iframe[src="https://example.com"]',
);
const frame = await elementHandle.contentFrame();

console.log('filling form in iframe');
await frame.type('#Name', 'Bob', { delay: 100 });
于 2019-04-29T23:04:01.523 回答
38

我没有弄清楚如何进入 iFrame 并输入内容，而是通过直接导航到 IFrame URL 来简化问题

https://warranty.goodmanmfg.com/registration/NewRegistration/NewRegistration.aspx?Sender=Goodman

让您的脚本直接转到上面的 URL 并尝试自动化，它应该可以工作

编辑 1：使用框架

由于简单的方法不适合你，我们用框架本身来做

下面是一个简单的脚本，可以帮助您入门

const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('http://www.goodmanmfg.com/product-registration', { timeout: 80000 });
    var frames = await page.frames();
    var myframe = frames.find(
        f =>
            f.url().indexOf("NewRegistration") > -1);
    const serialNumber = await myframe.$("#MainContent_SerNumText");
    await serialNumber.type("12345");

    await page.screenshot({ path: 'example.png' });

    await browser.close();
})();

输出是

类型串行

于 2017-10-21T06:47:08.740 回答
25

如果您无法选择/找到 iFrame，请阅读以下内容：

我在查找条纹元素时遇到了问题。原因如下：

您无法使用 JavaScript 访问具有不同来源的内容，如果您能做到，那将是一个巨大的安全漏洞。对于同源策略，浏览器会阻止脚本尝试访问具有不同源的框架。在此处查看更详细的答案

因此，当我尝试使用 puppeteer 的方法时：Page.frames()并且Page.mainFrame(). ElementHandle.contentFrame()我没有返回任何 iframe 给我。问题是它正在悄无声息地发生，我无法弄清楚为什么它找不到任何东西。

将这些参数添加到启动选项解决了这个问题： '--disable-web-security', '--disable-features=IsolateOrigins,site-per-process'

于 2020-01-31T08:02:59.167 回答
3

虽然你已经想通了，但我认为我有更好的解决方案。希望能帮助到你。

async doFillForm() {
    return await this.page.evaluate(() => {
       let iframe = document.getElementById('frame_id_where_form_is _present');
       let doc = iframe.contentDocument;
       doc.querySelector('#username').value='Bob';
       doc.querySelector('#password').value='pass123';
    });
}
于 2019-05-07T07:52:01.187 回答