web-dev-qa-db-fra.com

Événement de chargement pour iFrame non déclenché IE

Pourquoi l'événement load n'est-il pas déclenché dans IE pour iFrames?

S'il vous plaît jeter un oeil à cet exemple .

Fonctionne parfaitement comme prévu dans FF et Chrome, mais échec de IE.

jqueryinternet-exploreriframeload
24
Muleskinner

Je pense que pour les iframes dans Internet Explorer, vous ne pouvez pas définir ce gestionnaire d’événements (sur la charge) par programme, vous devez le spécifier dans votre balise.

Quelque chose comme:

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

Sinon, IE va simplement ignorer la fonction.

26
Seis

Internet Explorer a peut-être déjà chargé le contenu (et déclenché l'événement) avant que vous ajoutiez le gestionnaire. J'ai constaté que lorsque j'avais statiquement spécifié le code iframe src et ajouté des gestionnaires d'événements $ (x) .load via jquery, firefox (3.6.28) avait déclenché mes gestionnaires, mais que IE (8.0.6001.18702) .

J'ai fini par ajuster mon programme de test afin qu'il définisse l'iframe src via javascript après l'ajout du gestionnaire $ (x) .load. Mon gestionnaire $ (x) .load a été appelé aux mêmes points dans IE et Firefox (mais notez qu'un gestionnaire ajouté via l'attribut iframe onload s'est comporté différemment entre IE et FF). Voici ce que j'ai fini avec:

<!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 voici le "log" de Firefox:

i1/eb_mce_iframe_content.html effectivement chargé i1:

Fred le renard.

/eb_mce_iframe_content.html effectivement chargé x:

Fred le renard. 

2
Trevor

J'utilise l'événement readystatechange pour IE. 

var $iframe = $("<iframe>");
$iframe.on("load readystatechange", callback);
1
Ilya

L'attribution directe du gestionnaire à onload fonctionne avec Chrome, FF et IE (testé avec IE 8).

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

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

Utiliser le code JavaScript avec jQuery à partir de here fonctionne si vous modifiez la ligne if ($.browser.safari || $.browser.opera) { en if ($.browser.safari || $.browser.opera || $.browser.msie) {. Donc vous avez ce qui suit:

$(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';
           });
        }

    });
1
Sarah Vessels

La réponse de Seis est la bonne, et peut être améliorée pour utiliser des fonctions non globales/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 FONCTIONNERA PAS, même après ce hack. VousDEVEZutiliser attachEvent. Allez comprendre.

Remarque: naturellement, ce code verbatim ne fonctionnera pas dans les UA conformes à la norme.

0
driedfruit

Ajoutez le préfixe "iframe" devant votre identifiant:

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

Essayez alternativement d'utiliser "ready" au lieu de "load":

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

Cela devrait marcher.

0
EvilMM