webentwicklung-frage-antwort-db.com.de

Ladeereignis für iFrame nicht ausgelöst IE

Warum wird das Ereignis load in IE für iFrames nicht ausgelöst?

Bitte sehen Sie dieses Beispiel .

Funktioniert einwandfrei wie erwartet in FF und Chrome, aber IE schlägt fehl.

24
Muleskinner

Ich denke, für Iframes in Internet Explorer können Sie diesen Ereignishandler (Onload) nicht programmgesteuert festlegen. Sie müssen ihn in Ihrem Markup angeben.

So etwas wie:

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

Andernfalls wird IE die Funktion einfach ignorieren.

26
Seis

Der Internet Explorer hat möglicherweise den Inhalt bereits geladen (und das Ereignis ausgelöst), bevor Sie den Handler hinzufügen. Als ich den iframe src attr statisch spezifizierte und $ (x) .load-Ereignishandler über Jquery hinzufügte, löste Firefox (3.6.28) meine Handler aus, IE (8.0.6001.18702) jedoch nicht .

Am Ende habe ich mein Testprogramm so angepasst, dass es die iframe src über Javascript festlegte, nachdem der $ (x) .load-Handler hinzugefügt wurde. Mein $ (x) .load-Handler wurde an den gleichen Stellen in IE und Firefox aufgerufen (beachten Sie jedoch, dass ein über das iframe-Onload-Attribut hinzugefügter Handler sich zwischen IE und FF unterschiedlich verhält). Hier ist was ich endete mit:

<!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>

... und hier war der Firefox "log":

i1/eb_mce_iframe_content.html tatsächlich geladen i1:

Fred der Fuchs.

/eb_mce_iframe_content.html tatsächlich geladen x:

Fred der Fuchs 

2
Trevor

Ich benutze readystatechange für den IE. 

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

Die direkte Zuweisung des Handlers an onload funktioniert in Chrome, FF und IE (getestet mit IE 8).

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

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

Die Verwendung des JavaScript-Codes mit jQuery von here funktioniert, wenn Sie die if ($.browser.safari || $.browser.opera) {-Zeile in if ($.browser.safari || $.browser.opera || $.browser.msie) { ändern. Sie haben also folgendes:

$(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

Die Antwort von Seis ist die richtige und kann verbessert werden, um nicht-globale/anonyme Funktionen zu verwenden.

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

Zu meiner Überraschung funktioniert das.

Hinweis: iframe.onload = func () würde auch nach diesem Hack NICHT funktionieren. Sie MUST verwenden attachEvent. Stelle dir das vor.

Anmerkung: Dieser Code verbatim funktioniert natürlich nicht in standardkonformen UAs.

0
driedfruit

Fügen Sie das Präfix "iframe" vor Ihrer ID ein:

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

Versuchen Sie alternativ "ready" anstelle von "load":

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

Das sollte funktionieren.

0
EvilMM