web-dev-qa-db-ja.com

IFRAMEオンロードイベントはいつ発生しますか？

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

javascripthtmliframeonload
21
Robinicks

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

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

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

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

20
pts

上記の答え（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ハンドラーをバインドするためにいくつかの方法を試しました...いずれにせよ、起動が早すぎます。ブラウザの印刷プレビュー（グーグルクローム）に壊れた画像が含まれているので、私は知っています。印刷をキャンセルしてその関数を再度呼び出すと（画像がキャッシュされるようになりました）、印刷プレビューは正常です。

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

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();
    });
}
4
mschmoock

依存要素ではなく、htmlがロードされたとき。 （またはそう思う）。

ページの残りの部分が読み込まれたときに起動するには、jQuery（window）.load（function（）{またはwindow.onloadを実行して、ドキュメントを作成できません。

また、画像要素がロードされているかどうかを確認することもできます...画像の場合。負荷-など.

0
CodeJoust