如何在 Puppeteer 的 iframe 元素中 select 元素
How to select elements within an iframe element in Puppeteer
由于 ESPN 不提供 API,我正在尝试使用 Puppeteer 来抓取有关我的梦幻足球联赛的数据。但是,由于登录表单嵌套了 iframe 元素,我很难尝试使用 puppeteer 登录。
我已访问 http://www.espn.com/login 并 select 编辑了 iframe。我似乎无法 select iframe 中除主要部分之外的任何元素
frame.$('.main')
这是获取带有登录表单的 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()
我希望能够访问 iframe 元素中的用户名字段、密码字段和登录按钮。每当我尝试访问这些字段时,我都会得到一个 return 的空值。
您可以像现在一样使用 contentFrame
获取 iframe,然后调用 $
.
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto('http://www.espn.com/login')
const elementHandle = await page.waitForSelector('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()
等待 elementHandle.contentFrame() 为空:
const frame = await elementHandle.contentFrame();
我在查找条纹元素时遇到了问题。
原因如下:
You can't access an with different origin using JavaScript, it would be a huge security flaw if you could do it. For the same-origin policy browsers block scripts trying to access a frame with a different origin. See more detailed answer here
因此,当我尝试使用 puppeteer 的方法时:Page.frames()
和 Page.mainFrame().
ElementHandle.contentFrame()
我没有 return 任何 iframe 给我。问题是它悄无声息地发生,我不明白为什么它找不到任何东西。
将这些参数添加到启动选项解决了这个问题:
'--disable-web-security',
'--disable-features=IsolateOrigins,site-per-process'
由于 ESPN 不提供 API,我正在尝试使用 Puppeteer 来抓取有关我的梦幻足球联赛的数据。但是,由于登录表单嵌套了 iframe 元素,我很难尝试使用 puppeteer 登录。
我已访问 http://www.espn.com/login 并 select 编辑了 iframe。我似乎无法 select iframe 中除主要部分之外的任何元素
frame.$('.main')
这是获取带有登录表单的 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()
我希望能够访问 iframe 元素中的用户名字段、密码字段和登录按钮。每当我尝试访问这些字段时,我都会得到一个 return 的空值。
您可以像现在一样使用 contentFrame
获取 iframe,然后调用 $
.
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto('http://www.espn.com/login')
const elementHandle = await page.waitForSelector('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()
等待 elementHandle.contentFrame() 为空:
const frame = await elementHandle.contentFrame();
我在查找条纹元素时遇到了问题。 原因如下:
You can't access an with different origin using JavaScript, it would be a huge security flaw if you could do it. For the same-origin policy browsers block scripts trying to access a frame with a different origin. See more detailed answer here
因此,当我尝试使用 puppeteer 的方法时:Page.frames()
和 Page.mainFrame().
ElementHandle.contentFrame()
我没有 return 任何 iframe 给我。问题是它悄无声息地发生,我不明白为什么它找不到任何东西。
将这些参数添加到启动选项解决了这个问题:
'--disable-web-security',
'--disable-features=IsolateOrigins,site-per-process'