Événement Load iFrame pas tiré dans IE

Pourquoi le load événement à ne pas tiré dans IE pour les iFrames?

Veuillez jeter un oeil à cet exemple.

Fonctionnent parfaitement comme prévu dans FF et Chrome, mais IE ne.

InformationsquelleAutor Muleskinner | 2010-12-02
  1. 26

    Je pense que pour les iframes dans Internet Explorer, vous ne pouvez pas définir ce gestionnaire d'événement (onload) par programme, vous devez le spécifier dans votre balisage.

    Quelque chose comme:

    <iframe id="myFrame" onload="myFunction();"></iframe>

    Sinon IE va tout simplement ignorer la fonction.

    • Merci man, m'a sauvé la vie.
    • Btw. le jQuery lié événement n'a pas de travail pour moi dans FF trop, en précisant onload fonctionne comme prévu
    • Je n'arrive pas à obtenir que cela fonctionne pour IE10. onload="alert('moo');" ne pas alerter.
    InformationsquelleAutor Seis
  2. 2

    IE peut-être déjà chargé le contenu (et a déclenché l'événement) avant d'ajouter le gestionnaire. J'ai constaté que lorsque je statiquement spécifié l'iframe src attr, et a ajouté $(x).la charge des gestionnaires d'événements via jquery, firefox 3.6.28) a déclenché ma gestionnaires mais IE (8.0.6001.18702) n'a pas.

    J'ai fini le réglage de mon programme de test de sorte que l'ensemble de la iframe src via javascript après l'ajout de l' $(x).gestionnaire de chargement. My $(x).gestionnaire de chargement a été appelé aux mêmes endroits dans IE et Firefox (mais remarque un gestionnaire ajoutés via iframe attribut onload se sont comportés différemment entre IE et FF) . Voici ce que j'ai:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script type="text/javascript" src="jquery-ui/js/jquery-1.6.2.min.js"></script>

<script language="javascript">

function show_body(name, $iframe) {
  $('.log').append(name+': '+$iframe.contents().find('body').html()+'<br/>');
}

function actuallyLoaded(name, x) {
  $('.log').append(name+' actually loaded<br/>');
}

$(document).ready(function(){
  $('.i1').load(function(){show_body('i1', $('.i1'));});
  $('.i1').attr('src', 'eb_mce_iframe_content.html');
  var $x=$('.i1').clone().removeClass('i1');
  $('body').append($x);
  $x.load(function(){show_body('x', $x);});
  $x.attr('src', 'eb_mce_iframe_content.html');
});

</script>

</head>
<body>

<iframe class="i1" onload="actuallyLoaded($(this).attr('class')+'/'+$(this).attr('src'), this);">
</iframe>

<div class="log">
</div>

</body>
</html>

    ... et voilà que l'Firefox "journal":

    i1/eb_mce_iframe_content.html chargé
    i1:

    Fred le renard.

    /eb_mce_iframe_content.html chargé
    x:

    Fred le renard.

    InformationsquelleAutor Trevor
  3. 1

    Attribuant le gestionnaire directement à onload fonctionne dans Chrome, FF et IE (testé avec IE 8).

    (function (selector) {
    var frame = $(selector).get(0);

    if (frame) {
        frame.onload = function () {
            alert('frame loaded.');
        };
    }
})('#myframe');
    InformationsquelleAutor Devin
  4. 1

    En utilisant le code JavaScript avec jQuery à partir de ici fonctionne si vous modifiez le if ($.browser.safari || $.browser.opera) { ligne if ($.browser.safari || $.browser.opera || $.browser.msie) {. Vous avez donc la suivante:

    $(function(){

    var iFrames = $('iframe');

    function iResize() {

        for (var i = 0, j = iFrames.length; i < j; i++) {
          iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
        }

        if ($.browser.safari || $.browser.opera || $.browser.msie) { 

           iFrames.load(function(){
               setTimeout(iResize, 0);
           });

           for (var i = 0, j = iFrames.length; i < j; i++) {
                var iSource = iFrames[i].src;
                iFrames[i].src = '';
                iFrames[i].src = iSource;
           }

        } else {
           iFrames.load(function() { 
               this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
           });
        }

    });
    • Fonctionne pour moi sur >= IE7 et Chrome. Je n'ai pas vérifié les autres navigateurs. Merci!
    InformationsquelleAutor Sarah Vessels
  5. 1

    J'utilise readystatechange cas pour IE. 

    var $iframe = $("<iframe>");
$iframe.on("load readystatechange", callback);
    • Fonctionne avec ie 11!
    InformationsquelleAutor Ilya
  6. 0

    Ajouter le préfixe "iframe" en face de votre id:

    $('iframe#myFrame').load(function() {
  ...
});

    Alternativly essayez d'utiliser "prêt" au lieu de "charger":

    $('#myFrame').ready(function()  {
    alert("Loaded");
});

    Cela devrait fonctionner.

    • Merci, mais le "prêt" de l'événement est déclenché avant que le contenu de l'iFrame est chargé...
    • l'ajout de préfixe iframe ne fonctionne pas (IE 8)
    • il ne fonctionne pas dans IE 9
    • Il n'y a pas de logique à la suggestion que la spécification comme une iframe dans le sélecteur va faire quelque chose pour elle. Quelle est l'hypothèse — que ça va être encore plus sélectionné? Comment cela équivaut à l' ready événement... Le affolants.
    • L'événement ready n'est pas valide sur iframe documents, voir dev.jquery.com/ticket/5511
    InformationsquelleAutor EvilMM
  7. 0

    Seis réponse est la bonne, et peut être amélioré pour utilisation non-global/fonctions anonymes.

    window.dummy_for_ie7 = function() { }
var iframe = $('<iframe onload="dummy_for_ie7" />')[0];
iframe.attachEvent('onload', real_event_handler)

    À ma grande surprise, cela fonctionne.

    Remarque: iframe.onload = func() ne fonctionne PAS, même après que hack. Vous DOIT utilisation attachEvent. Allez comprendre.

    Remarque: bien entendu, ce code verbatim ne fonctionnera pas conforme à la norme de la Samu.

    InformationsquelleAutor driedfruit