JavaScriptでiframeの本文のコンテンツを取得する方法

154

<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description">
  <html>
    <head></head>
    <body class="frameBody">
      test<br/>
    </body>
  </html>
</iframe>

私が入手したいのは：

test<br/>

javascript html iframe

— ああ、神様
ソース

52

重要な注意：クロスドメインの場合、iFrameのコンテンツにはアクセスできません。Same-Originポリシーを参照してください。

— HellaMad 2014年

154

正確な質問は、jQueryではなく純粋なJavaScriptでそれを行う方法です。

しかし、私は常にjQueryのソースコードにあるソリューションを使用しています。これはネイティブJavaScriptの1行にすぎません。

私にとっては、それは最高の、読みやすく、さらには afaikです。のiframeのコンテンツを取得するための最短の方法。

最初にiframeを取得します

var iframe = document.getElementById('id_description_iframe');

// or
var iframe = document.querySelector('#id_description_iframe');

そして、jQueryのソリューションを使用します

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

オブジェクトのcontentWindowプロパティ中にこのトリックを行うInternet Explorerでも機能しiframeます。他のほとんどのブラウザはcontentDocumentプロパティをおり、それがこのOR条件で最初にこのプロパティを証明する理由です。設定されていない場合は、を試してくださいcontentWindow.document。

iframeで要素を選択する

次に、通常はを使用して、getElementById()またはquerySelectorAll()からDOM要素を選択できますiframeDocument。

if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');

iframeで関数を呼び出す

windowから要素のみを取得して、iframeいくつかのグローバル関数、変数、またはライブラリ全体（例：）を呼び出しますjQuery。

var iframeWindow = iframe.contentWindow;

// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');

// or
iframeContent = iframeWindow.$('#frameBody');

// or even use any other global variable
iframeWindow.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

注意

これは、同一生成元ポリシーを順守すれば可能です。

— アルゴリズム
ソース

2

iframeはここでは定義されていません。完全なコードを記述するか、それともjQueryを記述しないでください

— Tarun Gupta

13

すみませんが、コード行はjqueryコードからの抜粋であり、コードブロックは私自身のサンプルコードです。残りは誰もが抜け出すはずです。欠けているのは変数iframeだけです。そして私はおそらくあなたのiframeがどこにあるか、またはそのIDがどのようにあるかを知ることができません。

— アルゴリズム2013

5

iframeにリモートsrcがある場合、これは機能しないという回答の上部に警告を追加していただけませんか？私が間違っている場合は、別のHTTPリクエストを送信せずにiframeコンテンツを取得する方法を教えていただければ幸いです（iframeコンテンツを構築するためにJavaScriptを実行する必要があり、回避できない場合は2番目のJavaScript環境）。

— Zackline 2016年

1

そのような警告があります。しかし、私の説明の終わりに。同一生成元ポリシーを遵守する必要があります。それで全部です。

— アルゴリズム2016年

2

上記を機能さdocument.querySelector('#id_description_iframe').onload = function() {... せるには、誰かを助けることを願ってそれを囲まなければなりませんでした。

— user3442612

71

JQueryを使用して、これを試してください：

$("#id_description_iframe").contents().find("body").html()

— マイケル・アダダヨ
ソース

27

「ドメイン、プロトコル、ポートが一致する必要がある」ため、機能しません。：URLでアクセスフレームに安全でないJavaScriptの試み

— IonicăBizău

2

前述のように、ドメインが一致すれば機能します。ちなみに、$（ "＃id_description_iframe #id_of_iframe_body"）。html（）はChromeでは機能しますが、Firefoxのすべてのバージョンでは機能しないため、上記を使用しても問題ありません。つまり$（ "＃id_description_iframe #id_of_iframe_body"）。contents（）。find（ "body"）。html（）は両方で機能しました

— hobailey

41

それは私にとって完璧に機能します：

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;

— bizzr3
ソース

3

奇妙ですが、私にとって.bodyはうまくいきません。ただし、.getElementsByTagName('body')[0]そうです。

— ジェニー・オライリー

「.body」ではなく、単に「body」です。ドットを削除

— アルジュン

1

バニラjavascriptを使用している場合は、これが答えになるはずです。

— Jovanni G 2018

23

私の知る限り、iFrameはそのようには使用できません。そのsrc属性を別のページにポイントする必要があります。

プレーンの古いJavaScriptを使用して本体のコンテンツを取得する方法は次のとおりです。これはIEとFirefoxの両方で機能します。

function getFrameContents(){
   var iFrame =  document.getElementById('id_description_iframe');
   var iFrameBody;
   if ( iFrame.contentDocument ) 
   { // FF
     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
   }
   else if ( iFrame.contentWindow ) 
   { // IE
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
   }
    alert(iFrameBody.innerHTML);
 }

— ホセ・バシリオ
ソース

1

サファリ（ブランチ）で行われます

— Andrei Cristian Prodan '18年

クロスドメインの問題があるため、起源 " someOther.com "のフレームがクロスオリジンフレームにアクセスできないようにしました。

— lannyf

10

contentJSのiframeで使用：

document.getElementById('id_iframe').contentWindow.document.write('content');

— コースウェブ
ソース

5

タグの間にテキストを配置することは、iframeを処理できないブラウザ（つまり、

<iframe src ="html_intro.asp" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

「src」属性を使用して、iframe htmlのソースを設定します...

それが役に立てば幸い:)

3

次のコードは、クロスブラウザに準拠しています。IE7、IE8、Fx 3、Safari、Chromeで動作するため、ブラウザー間の問題を処理する必要はありません。IE6ではテストしませんでした。

<iframe id="iframeId" name="iframeId">...</iframe>

<script type="text/javascript">
    var iframeDoc;
    if (window.frames && window.frames.iframeId &&
        (iframeDoc = window.frames.iframeId.document)) {
        var iframeBody = iframeDoc.body;
        var ifromContent = iframeBody.innerHTML;
    }
</script>

— ネクノ
ソース

以下のhtmlは、MacのChrome 7で私に役立ちました。この元の投稿をWindowsのChrome 6でテストしたところ、問題なく動作しました。<html> <head> </ head> <body> <iframe id = "iframeId" name = "iframeId"> ... </ iframe> <script type = "text / javascript"> var iframeDoc; if（window.frames && window.frames.iframeId && window.frames.iframeId.document）{window.frames.iframeId.document.body.innerHTML = "<h1> testing </ h1>"; } </ script> </ body> </ html>

— ネクノ

1

window.frames.iframeId.document私にとっては未定義です。（Ubuntuの13.04、クロム）

— IonicăBizău

2

Chalkeyは正解です。iframeに含めるページを指定するには、src属性を使用する必要があります。これを行い、iframe内のドキュメントが親ドキュメントと同じドメインにある場合、これを使用できます。

var e = document.getElementById("id_description_iframe");
if(e != null) {
   alert(e.contentWindow.document.body.innerHTML);
}

当然のことながら、アラートに入れるだけでなく、コンテンツを使用して何か便利なことを実行できます。

— グラハム・クラーク
ソース

1

javascriptから本文コンテンツを取得するには、次のコードを試してみました。

var frameObj = document.getElementById('id_description_iframe');

var frameContent = frameObj.contentWindow.document.body.innerHTML;

ここで、「id_description_iframe」はiframeのIDです。このコードは私にとってはうまく機能しています。

— スナックシ
ソース

2

単にコードを貼り付けるのではなく、常に状況に応じて答えを入力してください。詳細はこちらをご覧ください。

— gehbiszumeis

1

コードのみの回答は低品質と見なされます。コードの機能と問題の解決方法を必ず説明してください。投稿に情報を追加できれば、質問者と将来の読者の両方に役立ちます。完全にコードベースの回答を説明するも参照してください：meta.stackexchange.com/questions/114762/...

— borchvm