Puppeteer 通过 Class 名称获取多个 iFrame

Question

我的网站上有多个 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”。有什么办法可以做到这一点吗？

Answer 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;
    }
  });
});

Puppeteer 通过 Class 名称获取多个 iFrame

Puppeteer get multiple iFrames by Class name

javascript

iframe

selector

node.js

puppeteer