使用 Puppeteer：如何从其父元素选择器中获取 iframe？

Question

我想获取一个iframe作为frame，然后点击frame中的一个元素，但是iframe没有名字，网站有很多frame(page.frames() returns 14个)。

而且我没有编辑 html 的权限。我只能编辑 JavaScript。

我认为在这种情况下识别 iframe 的最佳方法是从其父元素。

我如何使用木偶操作来做到这一点？

<div id="foo">
  <iframe>
    #document
  </iframe>
</div>

Answer 1

有了任何元素的 ID，您就可以轻松遍历其子元素并找到所有满足特定条件的元素，例如作为 iframe。
无法使用过滤功能，因为这不是数组，而是节点列表。

var parent = document.getElementById("foo");
var iframes = [];
for(var i = 0; i < parent.children.length; i++){
  var child = parent.children[i];
  if(child.localName == 'iframe'){
    iframes.push(child);
  }
  };
console.log(iframes)

<div id="foo">
  <iframe>
    #document
  </iframe>
</div>

Answer 2

您可以使用 elementHandle.contentFrame() 函数 return 来自元素句柄的框架。

引自文档：

Resolves to the content frame for element handles referencing iframe nodes, or null otherwise

示例：

const elementHandle = await page.$('div#foo iframe');
const frame = await elementHandle.contentFrame();

Answer 3

请注意，您还应该将这些浏览器启动选项添加到运行 contentFrame 方法中，否则它将 return null:

const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--disable-web-security',
      '--disable-features=IsolateOrigins,site-per-process'
    ]
});

使用 Puppeteer：如何从其父元素选择器中获取 iframe？

With Puppeteer: How can I get an iframe from its parent element selector?

javascript

google-chrome

chromium

node.js

puppeteer