Question

当HTML完全下载时，或仅当所有相关元素都加载时，IFRAME的onload事件是否会触发？（CSS / JS / IMG）

Answer 1

后者：<body onload=仅在所有依赖元素（css / js / img）都被加载时才会触发。

如果要在加载HTML时运行JavaScript代码，请在HTML结尾处执行此操作：

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

以下是关于加载和 ready 之间区别的relevant e-mail thread（jQuery支持两者）。

Answer 2

上述答案（使用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'标签并检查那些'完整'的状态。如果未完成，则会在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();
    });
}

Answer 3

正好在加载html时，而不是依赖元素。（或者我认为）。

当页面的其余部分加载时触发jQuery（窗口）.load（function（）{或window.onload不是文档onready。

您还可以检查是否加载了图像元素，如果是图像。 load-- etc。

究竟IFRAME onload事件何时触发？

3 个答案: