Puppeteer 通过类名获取多个 iFrame答案

【问题标题】：Puppeteer get multiple iFrames by Class namePuppeteer 通过类名获取多个 iFrame
【发布时间】：2021-06-22 19:07:47
【问题描述】：

我的网站上有多个 iFrame。现在我需要访问每个 iFrame 并在其中填写一个文本输入字段。所以我需要这样的东西：

 await page.evaluate(() => {
        let elementHandle = document.getElementsByClassName("card-fields-iframe")[0];
        const frame =  elementHandle.contentWindow.document.body.querySelector('input[id="number"]');
        frame.value = cardNumberValue;
  let elementHandle2 = document.getElementsByClassName("card-fields-iframe")[1];
        const frame2 =  elementHandle2.contentWindow.document.body.querySelector('input[id="name"]');
        frame2.value = cardNumberName;
  let elementHandle3 = document.getElementsByClassName("card-fields-iframe")[2];
        const frame3 =  elementHandle3.contentWindow.document.body.querySelector('input[id="date"]');
        frame3.value = cardNumberDate;
    }
    )

这显然是不可能的，因为我不能在这里使用“document.getElementsByClassName”。有什么办法可以做到这一点？

【问题讨论】：

标签： javascript node.js iframe puppeteer selector

【解决方案1】：

您可以使用 querySelectorAll 和 forEach 来循环 iframe。

await page.evaluate(() => {
  document.querySelectorAll('.card-fields-iframe').forEach((frames, index) => {
    console.log(frames);
  });
});

类似这样的：

await page.evaluate(() => {
  document.querySelectorAll('.card-fields-iframe').forEach((frames, index) => {
    let elementHandle = document.getElementsByClassName("card-fields-iframe")[index];

    if (index == 0) {
      let frameOne = elementHandle.contentWindow.document.body.querySelector('input[id="number"]');
      frameOne.value = cardNumberValue;
    }

    if (index == 1) {
      let frameTwo = elementHandle.contentWindow.document.body.querySelector('input[id="name"]');
      frameTwo.value = cardNumberName;
    }

    if (index == 2) {
      let frameThree = elementHandle.contentWindow.document.body.querySelector('input[id="date"]');
      frameThree.value = cardNumberDate;
    }
  });
});

【讨论】：