[英]How to select elements within an iframe element in Puppeteer
Since ESPN does not provide an API, I am trying to use Puppeteer to scrape data about my fantasy football league.由于 ESPN 不提供 API,我正在尝试使用 Puppeteer 来抓取有关我的梦幻足球联赛的数据。 However, I am having a hard time trying to login using puppeteer due to the login form being nested with an iframe element.
但是,由于登录表单嵌套了 iframe 元素,我很难尝试使用 puppeteer 登录。
I have gone to http://www.espn.com/login and selected the iframe. I can't seem to select any of the elements within the iframe except for the main section by doing我已经转到http://www.espn.com/login并选择了 iframe。我似乎无法 select 除了主要部分之外的任何元素 iframe
frame.$('.main')
This is the code that seems to get the iframe with the login form.这是似乎通过登录表单获得 iframe 的代码。
const browser = await puppeteer.launch({headless:false});
const page = await browser.newPage();
await page.goto('http://www.espn.com/login')
await page.waitForSelector("iframe");
const elementHandle = await page.$('div#disneyid-wrapper iframe');
const frame = await elementHandle.contentFrame();
await browser.close()
I want to be able to access the username field, password field, and the login button within the iframe element.我希望能够访问 iframe 元素中的用户名字段、密码字段和登录按钮。 Whenever I try to access these fields, I get a return of null.
每当我尝试访问这些字段时,我都会得到 null 的返回值。
You can get the iframe using contentFrame
as you are doing now, and then call $
.您可以像现在一样使用
contentFrame
获取 iframe,然后调用$
。
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto('http://www.espn.com/login')
await page.waitForSelector("iframe");
const elementHandle = await page.$('div#disneyid-wrapper iframe');
const frame = await elementHandle.contentFrame();
await frame.waitForSelector('[ng-model="vm.username"]');
const username = await frame.$('[ng-model="vm.username"]');
await username.type('foo');
await browser.close()
I had an issue with finding stripe elements.我在查找条纹元素时遇到了问题。 The reason for that is the following:
原因如下:
You can't access an with different origin using JavaScript, it would be a huge security flaw if you could do it.
您无法使用 JavaScript 访问具有不同来源的内容,如果您可以这样做,这将是一个巨大的安全漏洞。 For the same-origin policy browsers block scripts trying to access a frame with a different origin.
对于同源策略,浏览器会阻止尝试访问具有不同来源的框架的脚本。 See more detailed answer here
在此处查看更详细的答案
Therefore when I tried to use puppeteer's methods: Page.frames()
and Page.mainFrame().
因此,当我尝试使用
Page.frames()
的方法时: Page.frames()
和Page.mainFrame().
ElementHandle.contentFrame()
I did not return any iframe to me. ElementHandle.contentFrame()
我没有向我返回任何 iframe。 The problem is that it was happening silently and I couldn't figure out why it couldn't find anything.问题是它是默默地发生的,我不明白为什么它找不到任何东西。
Adding these arguments to launch options solved the issue: '--disable-web-security', '--disable-features=IsolateOrigins,site-per-process'
将这些参数添加到启动选项解决了这个问题:
'--disable-web-security', '--disable-features=IsolateOrigins,site-per-process'
等待 elementHandle.contentFrame() 为空:
const frame = await elementHandle.contentFrame();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.