iframeコンテンツが読み込まれたことを検出する（クロスブラウザ）

Question

iframeとそのコンテンツが読み込まれたが、運があまりないことを検出しようとしている。私のアプリケーションは、親ウィンドウのテキストフィールドに入力を受け取り、iframeを更新して 'ライブプレビュー'を提供します。

iframeロードイベントが発生したときを検出するために、次のコード（YUI）で開始しました。

$E.on('preview-pane', 'load', function(){ 
    previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0]; 
} 

'preview-pane'は、iframeのIDで、イベントハンドラをアタッチするためにYUIを使用しています。しかし、iframeのロード時にコールバックでボディにアクセスしようとすると失敗します。イベントハンドラが準備される前にiframeが読み込まれるためです。このコードは、それを生成するPHPスクリプトをスリープさせることによってiframeの読み込みを遅らせると機能します。

基本的には、iframeが読み込まれてドキュメントが準備完了していることをブラウザが検出する正しい方法は何ですか？

Answer 1

のiframeがロードされたときを検出すると、その文書にこれを追加するには準備ができていますか？

iframeをフレーム内のスクリプトから自分自身に伝えることができれば理想的です。例えば、親関数を直接呼び出すことで、準備ができたことを伝えることができます。クロスフレームコードの実行には、予想外の順序で起こる可能性があるため、常に注意が必要です。もう1つの方法は、独自のスコープで 'var isready = true;'を設定し、 'contentWindow.isready'の親スクリプトをスニッフィングします（そうでない場合はonloadハンドラを追加します）。それは共同で運用するのiframe文書を持って実用的ではありません何らかの理由で、あなたは、伝統的なロードレースの問題を持っていれば

すなわちその要素が、右隣同士にしている場合でも：

<img id="x" ... /> 
<script type="text/javascript"> 
    document.getElementById('x').onload= function() { 
     ... 
    }; 
</script> 

スクリプトが実行されるまでにアイテムがまだロードされていないという保証はありません。ロード・レースのうち

の方法があります。

1. はIE上で、あなたは何かがすでにロードされていますかどうかを確認するために「のreadyState」プロパティを使用することができます。

2. JavaScriptを有効にした状態でアイテムを使用できる場合は、ソースを設定してページに追加する前に、 'onload'イベント機能を動的に設定することができます。この場合、コールバックが設定される前にロードすることはできません。

3. マークアップでそれを含めての古い学校の道：

   <img onload="callback(this)" ... />

インラインHTML内のハンドラは、ほとんど常に間違ったことであり、避けるべきで「onsomething」、これで時にはそれが最も悪いオプションです。

Answer 2

thisブログ記事を参照してください。 jQueryを使用していますが、使用していなくても役立ちます。

基本的に、あなたのdocument.ready()

$('iframe').load(function() { 
    RunAfterIFrameLoaded(); 
}); 

Answer 3

Reactを使用している場合は、iframe要素のイベントリスナーをonLoadと設定するだけで簡単です。エンバーを使用して誰のための

<iframe src={'path-to-iframe-source'} onLoad={this.loadListener} frameBorder={0} />

Answer 4

予想通り、これは動作するはずです：

<iframe onLoad={{action 'actionName'}} frameborder='0' src={{iframeSrc}} />