IFRAME onload 事件究竟何时触发？答案

【问题标题】：Exactly when does an IFRAME onload event fire?IFRAME onload 事件究竟何时触发？
【发布时间】：2010-10-23 08:24:09
【问题描述】：

是在 HTML 完全下载后触发 IFRAME 的 onload 事件，还是仅在所有相关元素也加载时触发？ (css/js/img)

【问题讨论】：

只要您不使用 Internet Explorer，就会触发它。
当您不使用 iDevice 时，它会在所有元素加载完毕后触发。
@tortoise：谢谢你让我微笑。

标签： javascript html iframe onload

【解决方案1】：

后者：<body onload= 仅在所有依赖元素 (css/js/img) 也已加载时触发。

如果您想在 HTML 加载后运行 JavaScript 代码，请在 HTML 末尾执行此操作：

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

这里是relevant e-mail thread，关于 load 和 ready 之间的区别（jQuery 支持两者）。

【讨论】：

我假设主文档本身也是如此，而不仅仅是 iframe？
问题是 iframe.onload 事件何时触发；不是当 body.onload 触发时。这个答案有什么相关性？

【解决方案2】：

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

在页面的其余部分加载时触发 jQuery(window).load(function(){ 或 window.onload not document onready。

您还可以检查是否加载了图像元素以及是否加载了图像元素。加载——等等。

【讨论】：

【解决方案3】：

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

【讨论】：