Question

我想获取一个iframe作为框架并单击该框架中的一个元素，但是iframe没有名称，并且网站上有很多框架（page.frames()返回14）。

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

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

我该如何用木偶戏做到这一点？

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

Answer 1

注意你还应该添加这些浏览器启动选项来运行 contentFrame 方法，否则它会返回 null：

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

Answer 2

有了任何元素的ID，您就可以轻松地遍历其子元素并找到满足特定条件的所有子元素，例如成为iframe。
不能使用筛选器功能，因为它不是数组，而是NodeList。

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 3

您可以使用elementHandle.contentFrame()函数从元素句柄返回框架。

从文档中引用：

解析为引用iframe节点的元素句柄的内容框架，否则为null

示例：

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

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

3 个答案: