Возникает ли событие IFRAME onload при полной загрузке HTML или только при загрузке всех зависимых элементов? (CSS/JS/IMG)
Точно, когда срабатывает событие IFRAME onload?
Ответ 1
Последнее: <body onload=
срабатывает только тогда, когда все зависимые элементы (css/js/img) также загружаются.
Если вы хотите запустить код JavaScript при загрузке HTML, сделайте это в конце своего HTML:
<script>alert('HTML loaded.')</script></body></html>
Вот соответствующий поток электронной почты о разнице между загрузкой и готовностью (jQuery поддерживает оба).
Ответ 2
Вышеприведенный ответ (с использованием события onload) является правильным, однако в некоторых случаях это, по-видимому, неверно. Особенно при динамическом создании шаблона печати для веб-контента.
Я пытаюсь напечатать определенное содержимое страницы, создав динамический 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... в любом случае он срабатывает слишком рано. Я знаю, что, поскольку предварительный просмотр в браузере (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();
});
}
Ответ 3
Просто, когда html загружается, а не зависимые элементы. (или так я думаю).
Чтобы стрелять, когда остальная часть страницы загружается, jQuery (window).load(function() {или window.onload не документировать уже.
Вы также можете проверить, загружен ли элемент изображения и есть ли... если изображение. load - и т.д.