Événement de charge pour iFrame Non déclenché dans IE
Pourquoi l'événement load n'est-il pas déclenché dans IE pour les iFrames?
, Veuillez jeter un oeil à cet exemple.
Fonctionne parfaitement comme prévu dans FF et Chrome, mais IE échoue.
7 réponses
Je pense que pour les iframes dans Internet Explorer, vous ne pouvez pas définir ce gestionnaire d'événements (onload) par programmation, vous devez le spécifier dans votre balisage.
Quelque Chose comme:
<iframe id="myFrame" onload="myFunction();"></iframe>
Sinon IE va juste ignorer la fonction.
IE a peut-être déjà chargé le contenu (et déclenché l'événement) avant d'ajouter le gestionnaire. J'ai trouvé cela quand j'ai spécifié statiquement l'iframe src attr, et ajouté $(x).charger les gestionnaires d'événements via jquery, firefox (3.6.28) a déclenché mes gestionnaires mais IE (8.0.6001.18702) ne l'a pas fait.
J'ai fini par ajuster mon programme de test afin qu'il définisse l'iframe src via javascript après avoir ajouté le $(x).gestionnaire de chargement. My $(x).load handler a été appelé aux mêmes points dans IE et Firefox (mais notez 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 "journal" de Firefox:
I1 / eb_mce_iframe_content.html chargé i1:
Fred le renard.
/ eb_mce_iframe_content.html chargé x:
Fred le renard.
Affecter 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');
L'Utilisation du code JavaScript avec jQuery de ici fonctionne si vous changez 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';
});
}
});
J'utilise readystatechange événement pour IE.
var $iframe = $("<iframe>");
$iframe.on("load readystatechange", callback);
Ajoutez le préfixe "iframe" devant votre id:
$('iframe#myFrame').load(function() {
...
});
Essayez alternativement d'utiliser "ready" au lieu de "load":
$('#myFrame').ready(function() {
alert("Loaded");
});
Cela devrait fonctionner.
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 fonctionnerait pas, même après ce hack. Vous devez utiliser attachEvent. Aller à la figure.
Remarque: naturellement, ce code verbatim ne fonctionnera pas dans les UAs conformes aux normes.