web-dev-qa-db-ja.com

iframe内のWeb要素のQuerySelector

編集：新しいタイトル。私が探しているのは、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

ありがとう

javascripthtmliframeselenium-webdrivercss-selectors
25
snug

h3manth から変更されたシンプルなes6：

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

元のページのURLがiframeコンテンツと同じドメインにない場合、JavaScriptはiframeをブラックボックスとして扱います。つまり、その内部には何も表示されません。

19
Aero Wang

同じオリジンフレーム（互換性のある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の両方に飛び込みます。 Originのフレームを越えても（入ってはいませんが）存続する可能性があります。

0
LOAS