Question

编辑：新标题。我正在寻找的是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

谢谢 -

Answer 1

简单的es6改编自h3manth：

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

Answer 2

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

Answer 3

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

Answer 4

下面是摘录同源框架（即兼容ES5）的代码段：

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。它甚至可以在交叉原点帧中幸存（尽管不能输入）。

iframe内的Web元素的QuerySelector

4 个答案: