关于javascript：究竟是何时触发IFRAME onload事件？


Exactly when does an IFRAME onload event fire?

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

相关讨论

后者：仅在所有相关元素(css / js / img)也已加载时才触发。

如果要在加载HTML后运行JavaScript代码，请在HTML末尾执行以下操作：

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

这是有关负载和就绪(jQuery支持两者)之间差异的相关电子邮件线程。

相关讨论

上面的答案(使用onload事件)是正确的，但是在某些情况下，这似乎是不正确的。特别是在动态生成Web内容的打印模板时。

我尝试通过创建动态iframe并进行打印来打印页面的某些内容。如果包含图像，则在加载图像时无法启动它。当图像仍在加载时，总是会过早触发，从而导致打印不完整：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 onloadx="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毫秒后的重新检查。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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();
    });
}
相关讨论

只是在加载html时，而不是从属元素。 (或者我认为)。

要在页面其余部分加载时触发，请执行jQuery(window).load(function(){或window.onload而不是文档就绪)。

您还可以检查图像元素是否已加载，以及...是否图像。负载-等