Когда именно запускается событие загрузки IFRAME? - PullRequest
Новая
       7

Когда именно запускается событие загрузки IFRAME?

21 голосов
/ 02 мая 2009

Срабатывает ли событие IFRAME onload, когда HTML полностью загружен, или только когда загружаются также все зависимые элементы? (CSS / JS / IMG)

Ответы [ 3 ]

20 голосов
/ 02 мая 2009

Последнее: <body onload= срабатывает только тогда, когда все зависимые элементы (css / js / img) также загружены.

Если вы хотите запустить код JavaScript после загрузки HTML, сделайте это в конце вашего HTML: 

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

Вот соответствующая тема электронной почты о разнице между load и ready (jQuery поддерживает оба).

4 голосов
/ 12 октября 2012

Приведенный выше ответ (с использованием события onload) является верным, однако в некоторых случаях это, похоже, ведет себя неправильно. Особенно при динамическом создании шаблона печати для веб-контента.

Я пытаюсь распечатать определенное содержимое страницы, создав динамический фрейм и распечатав его. Если он содержит изображения, я не могу заставить его срабатывать при загрузке изображений. Он всегда срабатывает слишком рано, когда изображения все еще загружаются, что приводит к неполной печати: 

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()...
}

как вы можете видеть, я попробовал несколько методов для привязки обработчика загрузки ... в любом случае он сработает слишком рано. Я знаю это, потому что предварительный просмотр в браузере (Google Chrome) содержит поврежденные изображения. Когда я отменяю печать и снова вызываю эту функцию (изображения теперь кэшируются), предварительный просмотр печати в порядке.

... к счастью, я нашел решение. не красиво, но подходит. Что он делает, что сканирует поддерево для тегов '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();
    });
}
0 голосов
/ 02 мая 2009

Только когда загружается html, а не зависимые элементы. (или я так думаю).

Для запуска при загрузке остальной части страницы выполните jQuery (окно) .load (function () {или window.onload, а не документ уже.

Вы также можете проверить, загружен ли элемент изображения и есть ли ... изображение. нагрузка - и т. д.

...