javascript - pagina - ¿Exactamente cuándo se activa un evento de carga de IFRAME?
javascript onload page (3)
¿El evento de carga del IFRAME se activa cuando el HTML se ha descargado completamente, o solo cuando todos los elementos dependientes se cargan también? (css / js / img)
Justo cuando carga el html, no los elementos dependientes. (o eso creo).
Para disparar cuando el resto de la página se carga, jQuery (window) .load (function () {o window.onload not document onready.
También puede verificar si un elemento de imagen está cargado y allí ... si es una imagen. carga-- etc.
La respuesta anterior (usando el evento onload) es correcta, sin embargo, en ciertos casos, esto parece portarse mal. Especialmente cuando se genera dinámicamente una plantilla de impresión para contenido web.
Intento imprimir ciertos contenidos de una página creando un iframe dinámico e imprimiéndolo. Si contiene imágenes, no puedo disparar cuando las imágenes están cargadas. Siempre se dispara demasiado pronto cuando las imágenes todavía se están cargando y se produce una impresión incompleta:
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()...
}
como puedes ver, probé varios métodos para vincular el controlador de carga ... en cualquier caso, se disparará demasiado pronto. Lo sé porque la vista previa de impresión del navegador (google chrome) contiene imágenes rotas. Cuando cancelo la impresión y vuelvo a llamar a esa función (las imágenes están almacenadas en la memoria caché), la vista previa de impresión está bien.
... afortunadamente encontré una solución. no es bonita, pero adecuada. Lo que hace es escanear el subárbol de las etiquetas ''img'' y verificar el estado ''completo'' de esas. si está incompleto, demora una nueva comprobación después de 250 ms.
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();
});
}
El último: <body onload= dispara solo cuando todos los elementos dependientes (css / js / img) se han cargado también.
Si desea ejecutar código JavaScript cuando se ha cargado el HTML, hágalo al final de su HTML:
<script>alert(''HTML loaded.'')</script></body></html>
Aquí hay un hilo de correo electrónico relevante sobre la diferencia entre carga y listo (jQuery admite ambos).