22

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

4

3 に答える 3

20

後者:<body onload=すべての依存要素 (css/js/img) も読み込まれた場合にのみ発生します。

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

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

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

于 2009-05-02T17:35:16.993 に答える
4

上記の答え (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」タグをスキャンし、それらの「完了」状態をチェックすることです。未完了の場合、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();
    });
}
于 2012-10-12T10:36:57.670 に答える
0

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

ページの残りの部分が読み込まれたときに起動するには、jQuery(window).load(function(){ または window.onload not document onready を実行します。

image 要素が読み込まれているかどうかを確認することもできます... if image . ロード -- など

于 2009-05-02T17:37:01.263 に答える