web-dev-qa-db-fra.com

Evénement jQuery iframe load ()?

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

J'ai un iframe inséré avec $.ajax() et je veux faire quelques choses après que le contenu de l'iframe soit complètement chargé:

....
 success: function(html){  // <-- html is the IFRAME (#theiframe)
          $(this).html(html);   // $(this) is the container element
          $(this).show();
          $('#theiframe').load(function(){
             alert('loaded!');
          } 
....

cela fonctionne, mais je vois que l'IFRAME est chargé deux fois (l'alerte s'affiche également deux fois).

javascriptajaxjqueryiframe
48
Alex

Si possible, vous feriez mieux de gérer l'événement load dans le document de l'iframe et d'appeler une fonction dans le document qui le contient. Cela présente l’avantage de fonctionner dans tous les navigateurs et de ne fonctionner qu’une fois.

Dans le document principal:

function iframeLoaded() {
    alert("Iframe loaded!");
}

Dans le document iframe:

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

use iframe onload event

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

Dans le sens de réponse de Tim Down mais en utilisant jQuery (mentionné par l'OP) et en couplant vaguement la page contenant et l'iframe, vous pouvez effectuer les opérations suivantes:

Dans l'iframe:

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

Dans la page contenant:

<script>
    function myHandler() {
        alert('iframe (almost) loaded');
    }
    $(document).on('iframeready', myHandler);
</script>

L'iframe déclenche un événement sur le document de la fenêtre parente (potentiellement existante). Notez que le document parent a besoin de sa propre instance jQuery pour que cela fonctionne. Ensuite, dans la fenêtre parente, vous associez un gestionnaire pour réagir à cet événement.

Cette solution présente l’avantage de ne pas s’interrompre lorsque la page qui le contient ne contient pas le gestionnaire de charge attendu. Plus généralement, l'iframe ne devrait pas avoir à connaître son environnement.

Veuillez noter que nous tirons parti de l'événement prêt pour le DOM pour le déclencher - ce qui devrait convenir à 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, de la manière suivante:

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

C'est le même comportement que j'ai déjà vu: load() d'iframe se déclenche d'abord sur un iframe vide, puis la deuxième fois lorsque votre page est chargée.

Edit: Hmm, intéressant. Vous pouvez incrémenter un compteur dans votre gestionnaire d'événements et a) ignorer le premier événement load ou b) ignorer tout événement dupliqué load.

3
Piskvor

Vous pouvez utiliser la méthode Contents de jquery pour obtenir le contenu de l'iframe.

2
suhair

Si vous souhaitez qu'il soit plus générique et indépendant, vous pouvez utiliser un cookie. Le contenu Iframe peut créer un cookie. Avec jquery.cookie et une minuterie (ou dans ce cas, javascript timer), vous pouvez vérifier si le cookie est défini toutes les secondes environ.

//token should be a unique random value which is also sent to ifame to get set
iframeLoadCheckTimer = window.setInterval(function () {
        cookieValue = $.cookie('iframeToken');  
        if (cookieValue == token)
        {
            window.clearInterval(iframeLoadCheckTimer );
            $.cookie('iframeToken', null, {
                expires: 1, 
                path: '/'
         });
        }
 }, 1000);
2
Bahadır Birsöz

Sans code dans iframe + animate:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">

function resizeIframe(obj) {

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

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

    });

}    
</script>
<iframe width="100%" src="iframe.html" height="0" frameborder="0" scrolling="no" onload="resizeIframe(this)" >
2
Jérome Obbiet