web-dev-qa-db-ja.com

jQueryを使用してiframe内でHTMLを取得する

これが私の状況です。

iframe.htmlというファイルがあります。これには、画像スライドショー用のコードが含まれています。コードはやや似ています

<html>
  <head>
    <!-- Have added title and js files (jquery, slideshow.js) etc. -->
  </head>

  <body>
    <!-- Contains the images which are rendered as slidehow. -->
    <!-- have hierarchy like 'div' inside 'div' etc. -->
  </body>
</html>

ユーザーは埋め込みコードを使用して、スライドショーをブログまたはWebサイトに追加できます（異なるドメインからの場合もあります）。ユーザーがindex.htmlにスライドショーを埋め込む必要がある場合、次の行を追加して追加できます。

<iframe id="iframe" src="path_to_iframe.html" width="480" height="320" scrolling="no" frameborder="0"></iframe>

これにより、完全なHTMLコードがiframe.htmlからindex.htmlになります。ここで、iframeの要素にアクセスして、それらのプロパティの一部を調整する方法が必要です。

コードのように、iframeの幅と高さは、ユーザーがいくつかの固定寸法に設定します。スライドショー（および含まれる画像）のサイズをiframeコンテナーのサイズに調整したいと思います。これを行う最良の方法は何ですか？

index.htmlからiframeコンポーネントにアクセスしようとして成功しませんでした

$('#iframe').contents();

しかし、エラーが発生します：

TypeError：nullのメソッド 'contents'を呼び出すことができません

ですから、スライドショーが親の幅と高さをチェックし、それに応じて高さを設定するiframe.htmlのロジックを実装すると思います。

私はかなり混乱しています。私の質問がほとんどの人にとって意味があることを願っています。詳細についてはお気軽にお問い合わせください。あなたの助けに感謝します。

jqueryiframe
43
Ajit S

この行は、フレームのHTMLコード全体を取得します。 innerHTMLの代わりに他のメソッドを使用することにより、内部ドキュメントのDOMをトラバースできます。

document.getElementById('iframe').contentWindow.document.body.innerHTML

覚えておくべきことは、フレームソースが同じドメインにある場合にのみ機能するということです。別のドメインからのものである場合、クロスサイトスクリプティング（XSS）保護が開始されます。

55
Knaģis

このコードを試してください：

$('#iframe').contents().find("html").html();

これにより、iframe内のすべてのhtmlが返されます。 .find("html")の代わりに、必要なセレクターを使用できます（例：.find('body')、.find('div#mydiv')）。

42
Chamara Keragala
var iframe = document.getElementById('iframe');
  $(iframe).contents().find("html").html();
6
Dolo
$(editFrame).contents().find("html").html();
4
Arun Yokesh

ie8で正常に動作するため、これは私にとっては有効です。

$('#iframe').contents().find("html").html();

しかし、jquery用にjavascriptを別に使用したい場合は、このように使用できます

var iframe = document.getElementById('iframecontent');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var val_1 = innerDoc.getElementById('value_1').value;
2
Hermes

Divが次のようにある場合Iframe

 <iframe id="ifrmReportViewer" name="ifrmReportViewer" frameborder="0" width="980"

     <div id="EndLetterSequenceNoToShow" runat="server"> 11441551 </div> Or

     <form id="form1" runat="server">        
       <div style="clear: both; width: 998px; margin: 0 auto;" id="divInnerForm">          

            Some Text

        </div>
     </form>
 </iframe>

次に、次のコードを使用して、それらのテキストを見つけることができますDiv

var iContentBody = $("#ifrmReportViewer").contents().find("body");
var endLetterSequenceNo = iContentBody.find("#EndLetterSequenceNoToShow").text();

var divInnerFormText = iContentBody.find("#divInnerForm").text();

これが誰かの助けになることを願っています。

2
Md. Nazrul Islam

Ajaxを試してみて、コードパート1またはパート2（コメントを使用）を確認してください。

$(document).ready(function(){ 
        console.clear();
/*
    // PART 1 ERROR
    // Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Sandbox access violation: Blocked a frame at "http://stacksnippets.net" from accessing a frame at "null".  Both frames are sandboxed and lack the "allow-same-Origin" flag.
        console.log("PART 1:: ");
        console.log($('iframe#sandro').contents().find("html").html());
*/
        // PART 2
        $.ajax({
                url: $("iframe#sandro").attr("src"),
                type: 'GET',
                dataType: 'html'
        }).done(function(html) {
                console.log("PART 2:: ");
                console.log(html);
        });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<body>
<iframe id="sandro" src="https://jsfiddle.net/robots.txt"></iframe>
</body>
</html>
0
KingRider

Jqueryがiframe.htmlにロードされている場合、これは別のソリューションになります。

$('#iframe')[0].contentWindow.$("html").html()
0
toshi

参考のためです。これは、JQueryを使用して行う方法です（たとえば、要素IDでクエリできない場合に便利です）。

$('#iframe').get(0).contentWindow.document.body.innerHTML
0
mxro