jQuery iframe load() de l'événement?

Personne ne sait si il ya une telle chose?

J'ai une iframe qui est en cours d'insertion avec $.ajax() et je tiens à faire quelques trucs après le contenu de l'iframe sont 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!');
          } 
....

il fonctionne, mais je vois l'IFRAME est chargé à deux reprises (l'alerte montre également deux fois).

  • Essayez de définir le src de l'iframe avant d'ajouter à la DOM. Cela devrait permettre d'éviter l'événement load de tirer deux fois.
InformationsquelleAutor Alex | 2011-04-26
  1. 53

    Si possible, vous seriez mieux de la manipulation de la load événement à l'intérieur de l'iframe du document et l'appel à une fonction dans le document contenant. Cela a l'avantage de travailler dans tous les navigateurs et de n'exécuter qu'une seule fois.

    Dans le document principal:

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

    Dans l'iframe document:

    window.onload = function() {
    parent.iframeLoaded();
}
    • hey cela fonctionne! mais comment puis-je appeler une fonction à l'intérieur de la jQuery(document).ready fonction du document parent?
    • Vous aurez besoin de vous assurer que la fonction est globale, qui vous pouvez le faire soit par déclarer une variable dans la portée globale avant d'assigner une valeur à la variable à l'intérieur de votre ready() fonction, ou explicitement à l'affecter en tant que propriété de window à l'intérieur de votre ready() fonction. Par exemple: $(document).ready(function() { window.iframeLoaded = function() { alert("Load"); }; /* Other stuff here */ });
    • il semble que mon double problème de chargement est moi habillage de l'iframe entre les balises DIV. Pour quelque étrange raison navigateurs recharger l'iframe si vous faites cela...
    • Certes, certains navigateurs recharger l'iframe document si vous le cacher et de montrer l'iframe, ou la déplacer dans les DOM.
    • je ne comprends pas comment sa fonctionne 🙁 mais merci après tout, il a travaillé pour moi >> fenêtre.onload = function() { parent.iframeLoaded(); } function iframeLoaded() { } var postTempBody = "${postTempBody}"; /*remplissage du corps de la valeur*/ if(postTempBody != "){ window.iframeLoaded = function() { var $iframe = jQuery('#tinyMceEditor_ifr'); alert($iframe.la longueur); $iframe.ready(function() { $iframe.contenu().find("corps").append(postTempBody); }); }; }
    • Est-ce que le travail de la croix de domaine?

    InformationsquelleAutor Tim Down
  2. 50

    utilisation iframe événement onload 

    $('#theiframe').on("load", function() {
    alert(1);
});
    • Comme de JQuery 1.7 (novembre 2011), que vous êtes supposé utiliser $('#theiframe').on("load",function()).
    • Ne fonctionne pas avec jQuery v2.1.3
    • Cela ne semble pas déclencher.
    • Ne pas oublier de fermer avec }); 🙂
    InformationsquelleAutor m-khonsari
  3. 6

    Le long des lignes de Tim de Down réponse mais l'exploitation jQuery (mentionné par l'OP) et peu d'accouplement de la page qui les contient et les 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 qui les contient:

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

    L'iframe déclenche un événement sur l' (potentiellement) parent de la fenêtre de document - veuillez noter que le document parent a besoin d'un jQuery instance de lui-même pour que cela fonctionne. Puis, dans la fenêtre parent de vous attacher un gestionnaire de réagir à cet événement.

    Cette solution a l'avantage de ne pas casser lorsque la page qui les contient ne contient pas la charge prévue gestionnaire. Plus généralement, il ne devrait pas être la préoccupation de l'iframe à connaître son environnement.

    Veuillez noter que nous utilisons le DOM prêt événement pour déclencher l'événement - qui doit être adapté à la plupart des cas d'utilisation. Si elle ne l'est pas, il suffit de fixer l'événement déclencheur de la ligne de la fenêtre de l'événement load de la sorte:

    $(window).on('load', function() { ... });
    • C'est la seule solution qui a fonctionné pour moi. Je refuse d'utiliser un cookie pour gérer cela.
    InformationsquelleAutor Oliver
  4. 3

    C'est le même comportement que j'ai vu: de l'iframe load() va tirer le premier sur un vide iframe, puis la deuxième fois lorsque votre page est chargée.

    Edit: Hmm, intéressant. Vous pourriez incrémenter un compteur dans votre gestionnaire d'événements, et a) ignorer la première load événement, ou b) d'ignorer les doublons de load événement.

    • si j'ajoute alert($(this).attr('src')); à l'intérieur de la fonction de charge-je obtenir la même valeur à deux fois ...
    InformationsquelleAutor Piskvor
  5. 2

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

    InformationsquelleAutor suhair
  6. 2

    Si vous voulez qu'il soit plus générique et indépendante, vous pouvez utiliser un cookie. Iframe contenu peut placer un cookie. Avec jquery.cookie et un timer (ou dans ce cas, javascript timer), vous pouvez vérifier si le cookie est défini chaque seconde.

    //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);
    InformationsquelleAutor Bahadır Birsöz
  7. 2

    Sans code iframe + animer:

    <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)" >
    InformationsquelleAutor Jérome Obbiet