IFRAME的onload事件何时触发？

Question

IFRAME的onload事件何时触发？

javascripthtmliframeonload

22

IFRAME的onload事件是在HTML完全下载完成后触发，还是只有所有依赖的元素（css/js/img）也加载完成才会触发？

- Robin Rodricks

当您不使用iDevice时，它会触发，当所有元素都已加载完成。 - NoBugs

@tortoise：谢谢你让我微笑。 - ling

3个回答

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处理程序…无论如何，它都会过早启动。我之所以知道这一点，是因为浏览器的打印预览（谷歌浏览器）包含损坏的图像。当我取消打印并再次调用该函数（图像现在已被缓存）时，打印预览就正常了。

...幸运的是我找到了一个解决办法。虽然不太美观但很适合。它的作用是扫描子树以查找“img”标签，并检查其“complete”状态。如果不完整，则延迟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();
    });
}

- mschmoock

0

仅在HTML加载时触发，而不是依赖元素（至少我是这么认为的）。

要在页面的其余部分加载时触发，请使用jQuery(window).load(function(){或window.onload而不是document.onready。

您还可以检查图像元素是否已加载，如果是，则...如果图像.load--等等。

- CodeJoust

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pts · Accepted Answer

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

如果你想在HTML加载完毕后运行JavaScript代码，可以在HTML末尾执行该代码：

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

这里有一个相关的电子邮件线程讨论了load和ready之间的区别（jQuery支持两者）。