Iframeコンテンツが読み込まれたときの検出（クロスブラウザー）

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

iframeの読み込みイベントがいつ発生するかを検出するために、次のコード（YUI）から始めました。

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

'プレビューペイン'はiframeのIDで、YUIを使用してイベントハンドラーをアタッチしています。ただし、（iframeの読み込み時に）コールバックで本文にアクセスしようとすると失敗します。イベントハンドラーの準備が完了する前にiframeが読み込まれるためです。このコードは、iframeを生成するphpスクリプトをスリープさせることによってiframeの読み込みを遅らせると機能します。

基本的に、iframeが読み込まれ、ドキュメントの準備ができたことを検出するために、ブラウザー間で正しいアプローチは何ですか？

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'ハンドラーは、ほとんどの場合間違ったものであり、回避する必要がありますが、この場合、最も悪いオプションである場合があります。

このブログ投稿を参照してください。jQueryを使用しますが、使用していない場合でも役立つはずです。

基本的にこれをあなたに追加します document.ready()

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

Reactを使用する場合、同じオリジンのiframeロードイベントを検出することは、onLoadiframe要素にイベントリスナーを設定するのと同じくらい簡単です。

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

Emberを使用している人にとっては、これは期待どおりに機能するはずです。

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