Esattamente quando viene generato un evento di caricamento IFRAME?

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

Domanda

L'evento onload dell'IFRAME viene generato quando l'HTML è stato scaricato completamente o solo quando vengono caricati anche tutti gli elementi dipendenti? (Css / js / img)

È stato utile?

Soluzione

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

Se vuoi eseguire il codice JavaScript quando l'HTML è stato caricato, fallo alla fine del tuo HTML: 

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

Ecco un thread di posta elettronica pertinente sulla differenza tra carica e pronto (jQuery supporta entrambi).

Altri suggerimenti

La risposta sopra (utilizzando l'evento onload) è corretta, tuttavia in alcuni casi questo sembra comportarsi in modo errato. Soprattutto quando si genera dinamicamente un modello di stampa per il contenuto web.

Provo a stampare determinati contenuti di una pagina creando un iframe dinamico e stampandolo. Se contiene immagini, non riesco a farlo scattare quando le immagini vengono caricate. Si attiva sempre troppo presto quando le immagini sono ancora in fase di caricamento con conseguente stampa 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()...
}

come puoi vedere, ho provato diversi metodi per associare il gestore onload ... in ogni caso si attiverà troppo presto. Lo so perché l'anteprima di stampa del browser (google chrome) contiene immagini rotte. Quando annullo la stampa e chiamo di nuovo quella funzione (le immagini sono ora memorizzate nella cache) l'anteprima di stampa va bene.

... fortunatamente ho trovato una soluzione. non carino ma adatto. Ciò che fa scansiona il sottostruttura alla ricerca di tag 'img' e controlla lo stato 'completo' di quelli. se incompleto ritarda un nuovo controllo 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();
    });
}

Proprio quando viene caricato l'html, non gli elementi dipendenti. (o almeno così penso).

Per attivarsi quando il resto della pagina viene caricato eseguono jQuery (window) .load (function () {o window.onload non già documentato.

Puoi anche controllare se un elemento immagine è caricato e lì ... se immagine. carica-- ecc.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top