Puppeteer - iFrame 内的链接答案

【问题标题】：Puppeter - Link inside an iFramePuppeteer - iFrame 内的链接
【发布时间】：2019-02-25 00:56:07
【问题描述】：

我必须得到this page的要点下方的广告链接。

我正在尝试使用 Puppeter，但我遇到了问题，因为广告是 iframe！

我可以使用 Chrome 控制台成功获取我需要的内容：

document.querySelector('#adContainer a').href

木偶

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.setViewport({width: 1440, height: 1000})
  await page.goto('https://www.amazon.co.uk/dp/B07DDDB34D', {waitUntil: 'networkidle2'})

  await page.waitFor(2500);

  const elementHandle = await page.$eval('#adContainer a', el => el.href);

  console.log(elementHandle);
  await page.screenshot({path: 'example.png', fullPage: false});

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

错误：错误：未能找到匹配选择器“#adContainer a”的元素

编辑：

const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.setViewport({width: 1440, height: 1000})
  await page.goto('https://www.amazon.co.uk/dp/B07DDDB34D', {waitUntil: 'networkidle2'})

const adFrame = page.frames().find(frame => frame.name().includes('"adServer":"cs'))
const urlSelector = '#sp_hqp_shared_inner > div > a';
const url = await adFrame.$eval(urlSelector, element => element.textContent);
console.log(url);


  await browser.close();

运行：https://try-puppeteer.appspot.com/

【问题讨论】：

在 chrome 控制台中工作的原因是您在检查时切换到 iframe 上下文。

标签： javascript web-scraping puppeteer

【解决方案1】：

您需要在框架本身内执行该查询，可以通过page.frames() 访问：

const adFrame = page.frames().find(frame => frame.name().includes('<some text only appearing in name of this iFrame>');
const urlSelector = '#sp_hqp_shared_inner > div > a';
const url = await adFrame.$eval(urlSelector, element => element.textContent);
console.log(url);

我如何获得该网址的选择器：

免责声明 我自己没有试过这个。另外，我认为在 iFrame 中获取该 url 的适当方法更像是this:

const url = await adFrame.evaluate((sel) => {
  return document.querySelectorAll(sel)[0].href;
}, urlSelector);

【讨论】：

frame.name().includes('"adServer":"cs') 不够具体，因为根据 Chrome 开发工具搜索，似乎有 4 个其他实例与该匹配项匹配。但是，它看起来（至少对我而言），它的 id 为 ape_detail_hero-quick-promo_desktop_iframe - imgur.com/a/JTOMiiM - 你能确认一下吗？
谢谢。我试图运行它，但它没有获取 url。如果我打印框架的 html 内容，我注意到 url 不存在。我更新了问题（编辑部分），您可以在其中使用 try-puppeteer.appspot.com 重新测试它

【解决方案2】：

每次页面加载时，您都必须切换到要处理的框架。

async getRequiredLink() {
    return await this.page.evaluate(() => {
        let iframe = document.getElementById('frame_id'); //pass id of your frame
        let doc = iframe.contentDocument; // changing the context to the working frame
        let ele = doc.querySelector('you-selector'); // selecting the required element
        return ele.href;
    });
}

【讨论】：