53

次のコードを使用して、iframeを動的に作成します。

var iframe_jquery = $("<iframe>")
    .addClass("foo")
    .appendTo(container); // container is a jQuery object containing a <div> which already exists

次に、そのcontentWindowにアクセスしたいのですが、nullです。

var iframe = iframe_jquery.get(0);
if (iframe){ // iFrame exists
    console.log(iframe.contentWindow); // Prints "null"
    var doc = iframe.contentWindow.document; // NullpointerException
}

だから私は、「iframeはまだ準備ができていないのではないか」と思いました。だから私は試しました：

iframe_jquery.ready(function(){
    var iframe = iframe_jquery.get(0);
    console.log(iframe.contentWindow); // Prints "null"
    var doc = iframe.contentWindow.document; // NullpointerException
});

同じ結果。

どうしたの？

4

5 に答える 5

43

先週、iframeで遊んでいるときに（rtfエディターを作成して）この問題が発生しましたが、まだ準備ができていません。

に入れればうまくいくと思いました.ready()が.ready()、iframeがコンテンツを読み込んだときではなく、DOMの準備ができたときなので、コードをjQueryでラップすることになりました.load()。

だからこれを試してみてください：

$(function () {  
    $("#myiframe").load(function () {                        
        frames["myframe"].document.body.innerHTML = htmlValue;
    });
});

お役に立てれば

于 2012-08-30T15:03:34.637 に答える
21

問題は<iframe>、ページの実際のDOMに実際に追加されるまで、「実際」にはならないということです。 これがデモンストレーションするフィドルです。。

于 2012-08-30T15:10:20.840 に答える
7

ブラウザによって、documentまたはへのアクセス<iframe>は異なる場合があります。

これを処理する方法の例を次に示します。

if (iframe.contentDocument) // FF Chrome
  doc = iframe.contentDocument;
else if ( iframe.contentWindow ) // IE
  doc = iframe.contentWindow.document;
于 2012-08-30T15:03:06.100 に答える
3

onload属性を設定することで、iframeの読み込みが終了したときに実行される関数を作成することもできます。

于 2016-12-24T12:37:43.983 に答える
2

ブックマークレット版

好奇心から、これをまとめようと思いました。iframeとロードイベントは異なるブラウザ（主に古い、バラバラ、死んでいるはずのブラウザ）ではうまく一緒に再生されないことを覚えています...さらに、jQueryがこの問題をどのように回避するか完全にはわかりません...私の脳はこれはより適切にサポートされます（あるかどうかにかかわらず、ここにもそこにもありません）：

$(function(){
  /// bind a listener for the bespoke iframeload event
  $(window).bind('iframeload', function(){
    /// access the contents of the iframe using jQuery notation
    iframe.show().contents().find('body').html('hello');
  });
  /// create your iframe
  var iframe = $('<iframe />')
        /// by forcing our iframe to evaluate javascript in the path, we know when it's ready
        .attr('src', 'javascript:(function(){try{p=window.parent;p.jQuery(p).trigger(\'iframeload\');}catch(ee){};})();')
        /// insert the iframe into the live DOM
        .appendTo('body');
});

このアプローチを採用する理由は、通常、iframe自体の内部からロードイベントをトリガーする方がはるかに優れているためです。ただし、これは適切なドキュメントがiframeに読み込まれることを意味するため、動的iframeの場合、これは少し面倒です。これは、ドキュメントをロードすることとロードしないことの混合のようなものです。

上記は、私がこれまでにテストしたすべてのもので機能します-そして、はい、あなたは正しいです-それは少しばかげて、将来にわたって利用できず、おそらく否定的な意味を持つ他のものです;）

この投稿について私が言う前向きなことの1つ.contents()は、iframeのドキュメントにアクセスするための使用法を紹介することです。これは少なくとも少し便利です...

于 2012-08-30T15:53:04.173 に答える