[解決済み] Iframeコンテンツが読み込まれたことを検出する (クロスブラウザ)

質問

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が読み込まれるからだと思います。このコードは、iframeを生成するPHPスクリプトをスリープさせることによって、iframeの読み込みを遅らせると動作します。

基本的に、私は、iframe がロードされ、そのドキュメントが準備されたときに検出するためのブラウザ間の正しいアプローチは何であるかを尋ねているのです。

どのように解決するのですか？

は、iframe が読み込まれ、そのドキュメントが準備できたことを検出するために、どのようにすればよいのでしょうか？

フレーム内のスクリプトから iframe 自身に通知させることができれば理想的です。たとえば、親の関数を直接呼び出して、準備ができたことを知らせることができます。フレームをまたいだコード実行では、予期しない順序で物事が起こる可能性があるため、常に注意が必要です。別の方法として、独自のスコープで 'var isready= true;' を設定し、親スクリプトで 'contentWindow.isready' を検出します（検出されなかったらオンロード ハンドラを追加します）。

何らかの理由で 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' ハンドラーは、ほとんどの場合、間違ったものであり、避けるべきものですが、この場合、最も悪い選択肢であることもあります。