Exactement quand un événement IFRAME onload est-il déclenché?

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

Question

L'événement onload de l'IFRAME se déclenche-t-il lorsque le code HTML est complètement téléchargé ou uniquement lorsque tous les éléments dépendants sont également chargés? (css / js / img)

Était-ce utile?

La solution

Ce dernier: <body onload= ne se déclenche que lorsque tous les éléments dépendants (css / js / img) ont également été chargés.

Si vous souhaitez exécuter du code JavaScript lorsque le code HTML a été chargé, procédez comme suit à la fin de votre code HTML: 

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

Voici un fil de courrier électronique pertinent à propos de la différence entre charger et prêt (jQuery prend en charge les deux).

Autres conseils

La réponse ci-dessus (utilisation de l'événement onload) est correcte. Toutefois, dans certains cas, cela semble mal se comporter. Surtout lors de la génération dynamique d'un modèle d'impression pour le contenu Web.

J'essaie d'imprimer certains contenus d'une page en créant un iframe dynamique et en l'imprimant. S'il contient des images, je ne parviens pas à le déclencher lorsque les images sont chargées. Il se déclenche toujours trop tôt lorsque les images sont en cours de chargement, ce qui entraîne une impression incomplète: 

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

Comme vous pouvez le constater, j'ai essayé plusieurs méthodes pour lier le gestionnaire de chargement ... dans tous les cas, il se déclencherait trop tôt. Je le sais parce que l'aperçu avant impression du navigateur (Google Chrome) contient des images endommagées. Lorsque j'annule l'impression et que j'appelle à nouveau cette fonction (les images sont maintenant en cache), l'aperçu avant impression est correct.

... heureusement j'ai trouvé une solution. pas joli mais convenable. Cela permet de scanner la sous-arborescence à la recherche de balises 'img' et de vérifier l'état 'complet' de celles-ci. si elle est incomplète, la vérification est retardée après 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();
    });
}

Au moment du chargement du code HTML, pas des éléments dépendants. (ou alors je pense).

Pour se déclencher lorsque le reste de la page se charge, effectuez jQuery (window) .load (function () {ou window.onload non documenté.

Vous pouvez également vérifier si un élément d'image est chargé et là ... si image. load-- etc.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top