iframe 内 Web 元素的 QuerySelector答案

【问题标题】：QuerySelector for Web Elements Inside iframeiframe 内 Web 元素的 QuerySelector
【发布时间】：2014-12-25 04:00:55
【问题描述】：

编辑：新标题。我正在寻找的是 iframe 内元素的 document.querySelector。

我在谷歌上搜索了很多答案，最后我被难住了。

我正在尝试在 iframe 中进行查询。我正在构建要在 Selenium 中使用的字符串选择器，通常我只是用 Firebug 检查元素，然后使用 document.querySelectorAll("theStringIBuid");

但它不适用于 iframe 中的元素。我已经尝试了以下所有方法来在“page-iframe”iframe 中获取一个元素“radiobutton1”。

var elem1 = ".page-iframe";
console.log(elem1);
var elem2 = ".radiobutton1";
console.log(elem2);
document.querySelectorAll(elem1+elem2+"");

document.querySelectorAll('.page-iframe').contentWindow.document.body.querySelectorAll('.radiobutton1')
document.getElementById('.page-iframe').contentWindow.document.body.innerHTML;

[].forEach.call( document.querySelectorAll('.page-iframe'), 
function  fn(elem){ 
console.log(elem.contentWindow.document.body.querySelectorAll('.radiobutton1')); });

var contentWindow = document.getElementById('.page-iframe').contentWindow 
var contentWindow = document.querySelectorAll('.page-iframe') 
var contentWindow = document.querySelectorAll('.page-iframe')[0].contentWindow

谢谢-

【问题讨论】：

您是否可能在 iframe 加载完成之前运行脚本？如果您 console.log 内容窗口会得到什么？
如果你使用 selenium，你需要调用 switchTo().frame("id of frame") 然后运行你的代码。
好吧，我已经为此工作了两个小时，所以我认为页面已完成加载:)
而且我没有使用 Selenium 编写查询，而是尝试在 Firebug 控制台中编写查询。知道如何编写控制台查询来访问 iframe 中的元素吗？

标签： javascript html iframe selenium-webdriver css-selectors

【解决方案1】：

您可以这样做： document.querySelector("iframe").contentWindow.document.querySelector("button") https://m.youtube.com/watch?v=-mNp3-UX9Qc

【讨论】：

这个答案帮助我解决了我遇到的问题！谢谢！

【解决方案2】：

这是一个用于深入同源帧（即兼容 ES5）的 sn-p：

function findInFramesRec(selector, doc) {
  var hit = doc.querySelector(selector);
  if (hit) return hit;
  var frames = Array.prototype.slice.call(doc.frames);
  for(var i = 0; (i < frames.length) &&   !hit   ; i++) {
    try {
      if (!frames[i] || !frames[i].document) continue;
      hit = findInFramesRec(selector, frames[i].document);
    } catch(e) {}
  }
  return hit;
}

这将深入到框架集框架和 iframe 中。它甚至可以存活（尽管没有进入）跨源帧。

【讨论】：

【解决方案3】：

简单的es6改编自h3manth:

document.querySelectorAll('iframe').forEach( item =>
    console.log(item.contentWindow.document.body.querySelectorAll('a'))
)

【讨论】：

未捕获的安全错误：阻止了来源为“xxx.xxx.xx”的框架访问来源为“google.com”的框架。协议、域和端口必须匹配。”，来源：xxx.xxx.xx/#! (1)
您确定 iframe 输入和输出的域相同吗？
我不知道 Selenium，但是使用 puppeteer 你可以在启动参数中传递“--disable-web-security”并访问跨域框架。
仅与打字稿共享一个工作示例：document.getElementById("...")['contentWindow'].document.querySelectorAll("...")。泰！

【解决方案4】：

如果原始页面的 url 与 iframe 内容不在同一个域中，则 javascript 会将 iframe 视为黑盒子，这意味着它不会看到其中的任何内容。

【讨论】：

没错。看到这个问题：stackoverflow.com/questions/25098021/…