IFRAME onloadイベントが発生するのはいつですか？

StackOverflow https://stackoverflow.com/questions/815263

質問

IFRAMEのonloadイベントは、HTMLが完全にダウンロードされたとき、またはすべての依存要素も読み込まれたときにのみ起動しますか？ （css / js / img）

役に立ちましたか？

解決

後者：<body onload=は、すべての依存要素（css / js / img）もロードされた場合にのみ起動します。

HTMLが読み込まれたときにJavaScriptコードを実行する場合は、HTMLの最後でこれを実行します。

<script>alert('HTML loaded.')</script></body></html>

関連するメールスレッド load と ready の違いについて（jQueryは両方をサポートしています）。

他のヒント

上記の回答（onloadイベントを使用）は正しいですが、特定の場合、これは誤動作するようです。特に、Webコンテンツの印刷テンプレートを動的に生成する場合。

動的なiframeを作成して印刷することで、ページの特定のコンテンツを印刷しようとしています。画像が含まれている場合、画像が読み込まれたときに起動できません。画像がまだ読み込まれているときに常に起動が早すぎるため、印刷が不完全になります。

function printElement(jqElement){
    if (!$("#printframe").length){
        $("body").append('<iframe id="printframe" name="printframe" style="height: 0px; width: 0px; position: absolute" />');
    }

    var printframe = $("#printframe")[0].contentWindow;
    printframe.document.open();
    printframe.document.write('<html><head></head><body onload="window.focus(); window.print()">');
    printframe.document.write(jqElement[0].innerHTML);
    printframe.document.write('</body></html>');
//  printframe.document.body.onload = function(){
//      printframe.focus();
//      printframe.print();
//  };
    printframe.document.close();
//  printframe.focus();
//  printframe.print();

//  printframe.document.body.onload = function()...
}

おわかりのように、onloadハンドラーをバインドするためにいくつかのメソッドを試しました...いずれにしても、それは早すぎます。ブラウザーの印刷プレビュー（google chrome）に壊れた画像が含まれているためです。印刷をキャンセルし、その関数を再度呼び出すと（画像がキャッシュされます）、印刷プレビューは問題ありません。

...幸いなことに、解決策が見つかりました。きれいではありませんが、適切です。 「img」タグのサブツリーをスキャンし、それらの「完了」状態をチェックすることは何をしますか。未完了の場合、250ミリ秒後に再チェックが遅れます。

function delayUntilImgComplete(element, func){
    var images = element.find('img');
    var complete = true;
    $.each(images, function(index, image){
        if (!image.complete) complete = false;
    });
    if (complete) func();
    else setTimeout(function(){
        delayUntilImgComplete(element, func);}
    , 250);
}    

function printElement(jqElement){
    delayUntilImgComplete(jqElement, function(){
        if (!$("#printframe").length){
            $("body").append('<iframe id="printframe" name="printframe" style="height: 0px; width: 0px; position: absolute" />');
        }

        var printframe = $("#printframe")[0].contentWindow;
        printframe.document.open();
        printframe.document.write(jqElement[0].innerHTML);
        printframe.document.close();
        printframe.focus();
        printframe.print();
    });
}

依存要素ではなく、HTMLが読み込まれたとき。 （またはそうだと思います）。

残りのページがロードされたときに起動するには、jQuery（window）.load（function（）{またはwindow.onloadがドキュメントの準備ができていません。

画像要素がロードされているかどうかを確認することもできます。 load--など。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top