web-dev-qa-db-ja.com

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が読み込まれ、ドキュメントの準備ができたことを検出するために、ブラウザー間で正しいアプローチを尋ねていますか？

javascripteventscross-browser
82
David Snabel-Caunt

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

70
bobince

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

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

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

Reactを使用している人にとって、同じ起源のiframeロードイベントの検出は、iframe要素でonLoadイベントリスナーを設定するのと同じくらい簡単です。

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

9
Farzad YZ

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

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