web-dev-qa-db-ja.com

Javascriptでiframeの本体のコンテンツを取得する方法

<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/>
javascripthtmliframe
138
omg

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

しかし、私はいつもjQueryのソースコードにある解決策を使います。ネイティブJavaScriptのほんの1行です。

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

まず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オブジェクトのiframeプロパティ中にこのトリックを実行するInternet Explorerでも機能します。他のほとんどのブラウザはcontentDocumentプロパティを使用しているため、このOR条件で最初にこのプロパティを検証しています。設定されていない場合はcontentWindow.documentを試してください。

iframeの要素を選択する

そうすると、通常はiframeDocumentからDOM要素を選択するためにgetElementById()あるいはquerySelectorAll()を使うことができます。

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 /*, ... */);

注

same-Origin policy を守れば、これはすべて可能です。

141
algorhythm

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

$("#id_description_iframe").contents().find("body").html()
67
Michael Adedayo

それは私のために完璧に動作します。

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

私の知る限り、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);
 }
23
Jose Basilio

jSのiframeでcontentを使用します。

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

タグの間にテキストを配置することは、iframeを処理できないブラウザ用に予約されていると思います。

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

Iframes HTMLのソースを設定するには 'src'属性を使用します。

それが役立つことを願っています：）

4
user110714

次のコードはクロスブラウザに準拠しています。 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>
4
nekno

Chalkeyは正しいです、あなたはiframeに含まれるページを指定するためにsrc属性を使う必要があります。これを行い、iframe内の文書が親文書と同じドメインにあるという条件で、これを使用できます。

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

明らかに、アラートを送信するのではなく、コンテンツに対して何か便利なことを実行できます。

2
Graham Clark