¿Exactamente cuándo se activa un evento de carga IFRAME?

StackOverflow https://stackoverflow.com/questions/815263

Pregunta

¿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)

¿Fue útil?

Solución

El último: <body onload= se activa solo cuando todos los elementos dependientes (css / js / img) también se han cargado.

Si desea ejecutar el 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 cargar y listo (jQuery admite ambos).

Otros consejos

La respuesta anterior (usando el evento onload) es correcta, sin embargo, en ciertos casos esto parece comportarse 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 hacer que se dispare cuando se cargan las imágenes. Siempre se dispara demasiado pronto cuando las imágenes aún se 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 puede 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 ahora están en caché), la vista previa de impresión está bien.

... afortunadamente encontré una solución. No es bonito pero adecuado. Lo que hace es que escanea el subárbol en busca de etiquetas 'img' y verifica el estado 'completo' de ellas. si está incompleto, retrasa una nueva verificació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();
    });
}

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

Para disparar cuando se carga el resto de la página, haga jQuery (window) .load (function () {o window.onload no documente listo.

También puede verificar si un elemento de imagen está cargado y allí ... si es imagen. cargar-- etc.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top