Événement de chargement de l'iframe jQuery?

Question

Est-ce que quelqu'un sait s'il existe une telle chose?

J'ai un iframe qui est inséré avec $.ajax() et je veux faire quelques choses après le chargement complet du contenu de l'iframe:

....
 success: function(html){  // <-- html est l'IFRAME (#theiframe)
          $(this).html(html);   // $(this) est l'élément conteneur
          $(this).show();
          $('#theiframe').load(function(){
             alert('chargé!');
          } 
....

Cela fonctionne, mais je vois que l'IFRAME est chargé deux fois (l'alerte apparaît également deux fois).

Answer 1

Utiliser l'événement onload de l'iframe

$('#theiframe').on("load", function() {
    alert(1);
});

Answer 2

Si possible, il vaudrait mieux gérer l'événement load à l'intérieur du document de l'iframe et appeler une fonction dans le document conteneur. Cela présente l'avantage de fonctionner dans tous les navigateurs et de ne s'exécuter qu'une fois.

Dans le document principal :

function iframeLoaded() {
    alert("Iframe chargé !");
}

Dans le document de l'iframe :

window.onload = function() {
    parent.iframeLoaded();
}

Answer 3

Dans la lignée de la réponse de Tim Down mais en utilisant jQuery (mentionné par l'OP) et en couplant de manière lâche la page conteneur et l'iframe, vous pourriez faire ce qui suit :

Dans l'iframe :

    $(function() {
        var w = window;
        if (w.frameElement != null
                && w.frameElement.nodeName === "IFRAME"
                && w.parent.jQuery) {
            w.parent.jQuery(w.parent.document).trigger('iframeready');
        }
    });

Dans la page conteneur :

    function myHandler() {
        alert('iframe (presque) chargé');
    }
    $(document).on('iframeready', myHandler);

L'iframe déclenche un événement sur le document de la fenêtre parent (éventuellement existante) - veuillez noter que le document parent doit avoir une instance jQuery de lui-même pour que cela fonctionne. Ensuite, dans la fenêtre parent, vous attachez un gestionnaire pour réagir à cet événement.

Cette solution a l'avantage de ne pas se casser lorsque la page conteneur ne contient pas le gestionnaire de chargement attendu. Plus généralement, cela ne devrait pas être la préoccupation de l'iframe de connaître son environnement environnant.

Veuillez noter que nous exploitons l'événement DOM ready pour déclencher l'événement - ce qui devrait convenir pour la plupart des cas d'utilisation. Si ce n'est pas le cas, attachez simplement la ligne de déclenchement d'événement à l'événement de chargement de la fenêtre comme ceci :

$(window).on('load', function() { ... });

Answer 4

C'est le même comportement que j'ai observé : la fonction load() de l'iframe se déclenchera d'abord sur un iframe vide, puis une deuxième fois lorsque votre page est chargée.

Édition : Hmm, intéressant. Vous pourriez incrémenter un compteur dans votre gestionnaire d'événements, et a) ignorer le premier événement load, ou b) ignorer tout événement load en double.

Answer 5

Sans code dans iframe + animation :

function resizeIframe(obj) {

    jQuery(document).ready(function($) {

        $(obj).animate({height: obj.contentWindow.document.body.scrollHeight + 'px'}, 500)

    });

}    

</code></pre></x-turndown>