web-dev-qa-db-ja.com

Javascript iframe innerHTML

私がIFRAMEからHTMLを取り出す方法を知っている人はいますか？

document.getElementById('iframe01').contentDocument.body.innerHTML
document.frames['iframe01'].document.body.innerHTML
document.getElementById('iframe01').contentWindow.document.body.innerHTML

等

javascriptiframeinnerhtml
19
Ubervan

次のようなものがあればうまくいきます。

<iframe id = "testframe" onload = populateIframe(this.id);></iframe>

// The following function should be inside a script tag

function populateIframe(id) { 

    var text = "This is a Test"
var iframe = document.getElementById(id); 

var doc; 

if(iframe.contentDocument) { 
    doc = iframe.contentDocument; 
} else {
    doc = iframe.contentWindow.document; 
}

doc.body.innerHTML = text; 

  }
11
cypher

JQuery を見ると、次のようなことができます：

<iframe id="my_iframe" ...></iframe>

$('#my_iframe').contents().find('html').html();

これは、Javascriptの Same Origin Policy により、iframeの親と子が同じサーバーに存在することを前提としています。

8
ConroyP

コンロイの答えは正しかった。 bodyタグからのものだけが必要な場合は、以下を使用します。

$('#my_iframe').contents().find('body').html();
5
ravi404

セキュリティのためにドメインを横断できないことを忘れないでください。

この場合、 [〜＃〜] json [〜＃〜] を使用する必要があります。

2
Biri

そのためにcontentDocumentまたはcontentWindowプロパティを使用できます。サンプルコードは次のとおりです。

function gethtml()
{
var x=document.getElementById("myframe");
var y=(x.contentWindow || x.contentDocument);
if (y.document)y=y.document;
alert(y.body.innerHTML);
}

ここで、私のフレームはiframeのIDです。注：ドメイン外のsrcからiframeからコンテンツを抽出することはできません。

2
Sourabh

このソリューションは、iFrameと同じように機能します。他のウェブサイトからすべてのコンテンツを取得できるPHPスクリプトを作成しました。最も重要な部分は、カスタムjQueryをその外部コンテンツに簡単に適用できることです。次のスクリプトを参照してください他のWebサイトからすべてのコンテンツを取得し、cusom jQuery/JSを同様に適用できます。このコンテンツは、どこでも、どの要素やページでも使用できます。

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()
{
  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;
}
1
Ahsan Horani
document.getElementById('iframe01').outerHTML
1
user1175106

FirefoxにForceCORSフィルターをインストールすると、別のドメインからソースを取得できます。このフィルターをオンにすると、ブラウザーのセキュリティ機能がバイパスされ、別のWebページを読み取ろうとしてもスクリプトが機能します。たとえば、iFrameでFoxNews.comを開き、そのソースを読むことができます。最近のWebブラウザがデフォルトでこの機能を拒否している理由は、他のドメインにJavaScriptが含まれていて、それを読んでページに表示すると、悪意のあるコードが含まれてセキュリティ上の脅威になる可能性があるためです。したがって、ページに別のドメインのデータを表示するときは常に、この本当の脅威に注意し、表示する前にテキストからすべてのJavaScriptコードを除外する方法を実装する必要があります。生のテキストの一部にスクリプトタグで囲まれたコードが含まれている場合、ページに表示しても表示されませんが、実行されます。したがって、これが脅威であることを理解してください。

http://www-jo.se/f.pfleger/forcecors

1
Zsolt