2009-05-02 29 views
20

L'evento onload dell'IFRAME si attiva quando l'HTML è completamente scaricato o solo quando vengono caricati anche tutti gli elementi dipendenti? (css/js/img)Esattamente quando viene attivato un evento di carico onload IFRAME?

+9

Ogni volta che non si utilizza Internet Explorer, è quando si attiva. – Tortoise

+0

Quando non si utilizza un iDevice, si attiva, quando tutti gli elementi sono caricati. – NoBugs

+0

@tortoise: grazie per avermi fatto sorridere. – ling

risposta

20

Quest'ultimo: <body onload= si attiva solo quando sono stati caricati anche tutti gli elementi dipendenti (css/js/img).

Se si desidera eseguire il codice JavaScript quando l'HTML è stato caricato, fare questo alla fine del codice HTML:

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

Ecco un relevant e-mail thread sulla differenza tra carico e pronto (jQuery supporta entrambi).

+1

Suppongo che lo stesso sia vero per il documento principale stesso, non solo per gli iframe? – MatrixFrog

0

Proprio quando viene caricato il codice HTML, non gli elementi dipendenti. (o così penso).

a fuoco quando il resto la pagina viene caricata fare jQuery (finestra) .load (function() {o no window.onload documentare onReady.

È inoltre possibile controllare per vedere se un elemento immagine viene caricata e lì ... se l'immagine. load-- ecc

4

La risposta di cui sopra (usando evento onload) è corretto, ma in alcuni casi questo sembra comportarsi male. soprattutto quando si genera dinamicamente un modello di stampa per il web-content.

Provo a stampare determinati contenuti di una pagina creando un iframe dinamico e stampandolo. Se contiene immagini non riesco a farlo sparare n le immagini sono caricate. Si spara sempre troppo presto quando le immagini verranno comunque caricati con un conseguente stampa incompleto:

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

come potete vedere ho provato diversi metodi per legare il gestore onLoad ... in ogni caso scatterà troppo presto. Lo so perché l'anteprima di stampa del browser (google chrome) contiene immagini spezzate. Quando annullo la stampa e richiama di nuovo quella funzione (le immagini vengono ora memorizzate nella cache), l'anteprima di stampa va bene.

... fortunatamente ho trovato una soluzione. non carino ma adatto. Che cosa fa scansiona la sottostruttura per i tag 'img' e controlla lo stato 'completo' di quelli. se incompleto ritarda un ricontrollo dopo 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

questo è molto utile grazie – kofifus

Problemi correlati