2009-05-02 16 views
20

¿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)¿Cuándo se desencadena un evento de carga de IFRAME?

+9

Siempre que no esté utilizando Internet Explorer, es cuando se dispara. – Tortoise

+0

Cuando no está utilizando un iDevice, se dispara cuando se han cargado todos los elementos. – NoBugs

+0

@tortoise: gracias por hacerme sonreír. – ling

Respuesta

20

El último: <body onload= se 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 código HTML, hacer esto al final de su HTML:

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

Aquí es una relevant e-mail thread sobre la diferencia entre carga y lista (jQuery es compatible con ambos).

+1

Supongo que lo mismo es cierto para el documento principal en sí, no solo para los iframes. – MatrixFrog

0

Justo cuando carga el html, no los elementos dependientes. (o eso creo).

para disparar cuando el resto de la página se carga hacer jQuery (ventana) .load (function() {o no window.onload documentar onready.

También puede comprobar para ver si se carga un elemento de imagen y allí ... si la imagen. load-- etc.

4

La respuesta anterior (utilizando proceso de carga) es correcto, sin embargo, en ciertos casos esto parece comportarse mal. Sobre todo cuando la generación dinámica de una plantilla de impresión para el contenido web.

Intento imprimir ciertos contenidos de una página creando un iframe dinámico e imprimiéndolo. Si contiene imágenes, no puedo hacer que se dispare. n las imágenes están cargadas. Se dispara siempre demasiado pronto cuando las imágenes todavía están cargando lo que resulta en 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 se puede ver que probé varios métodos para unir el controlador onLoad ... 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(); 
    }); 
} 
+0

esto es muy útil thx – kofifus

Cuestiones relacionadas