IE et l'ajout d'iframe en Javascript
Par Benjamin le jeudi 15 janvier 2009, 11:30 - technique - Lien permanent
Ce billet décrit deux anomalies d'Internet Explorer dans la façon dont il gère des iframes ajoutés dynamiquement, et une façon d'y remédier.
La manipulation du DOM avec Javascript est la technique de base utilisée pour enrichir des pages HTML (c'est d'ailleurs ce qu'utilisent les gadgets publo.fr). Cependant, tous les navigateurs ne respectent pas les standard du Web, et bien sûr, certains ajoutent des bugs à ces incompatibilités.
Internet Explorer présente un bug assez original dans ce domaine. Le problème survient lorsqu'on utilise du Javascript pour ajouter un iframe au document et que l'on tente de modifier ses attributs a posteriori.
Premier exemple : les changement d'attributs sans effet
On ajoute un iframe au noeud "noeudIFrame" puis on tente de masquer sa bordure et ses scrollbars (par défaut, IE affiche une bordure et des scrollbars aux iframes, ce qui n'est pas toujours du meilleur effet).
var iframe = noeudIFrame.appendChild(
document.createElement('iframe'));
iframe.setAttribute('frameBorder', '0');
iframe.setAttribute('scrolling', 'no');
Malheureusement, les deux dernières lignes de code n'ont aucun effet (la bordure et le scrolling resteront visibles) sous IE... Il est trop tard lorsque l'iframe a été ajouté dans le DOM pour modifier ces deux attributs. Par contre, le code suivant fonctionne :
var iframe = document.createElement('iframe');
iframe.setAttribute('frameBorder', '0');
iframe.setAttribute('scrolling', 'no');
noeudIFrame.appendChild(iframe);
Notez au passage que la casse utilisée pour l'attribut frameBorder n'est pas une coquille de ma part : alors que le nom standard est frameborder, IE ne le comprend pas mais comprend frameBorder.
Second exemple (plus vicieux) : l'iframe qui plante le navigateur
On ajoute un iframe au document puis on définit sa source (attribut src) :
var iframe = noeudIFrame.appendChild(
document.createElement('iframe'));
iframe.setAttribute('src','http://blog.publo.fr');
Ici le résultat est encore plus catastrophique : il peut aboutir à un crash du navigateur sous Windows XP, avec IE6 et IE7 (le bug semble corrigé sous Vista). Là encore, la prudence recommande de définir la source avant d'ajouter l'élément :
var iframe = document.createElement('iframe');
iframe.setAttribute('src', 'http://blog.publo.fr');
noeudIFrame.appendChild(iframe);
En conclusion, si l'on veut éviter des problèmes avec certains navigateurs puis des bugs difficiles à identifier, il vaut mieux ménager le DOM ! En particulier pour les iframe : on commence par les créer, on les définit complètement puis on les insère dans le document.
Si cet article vous a intéressé, n'hésitez pas à nous laisser un commentaire ou à vous abonner à notre flux RSS.
Peut-être serez-vous également intéressé par ces articles :
Commentaires
D'une manière générale pour tous les éléments html comportant un attribut src, il faut systématiquement que cet attribut soit défini avant d'ajouter l'élement dans le DOM.
Par exemple pour une iframe, s'il n'est pas défini, IE l'interprète comme src="about:blank" ce qui génère un message d'erreur de sécurité si la page est en https !
Pour les balises img la valeur par défaut du src est l'adresse de la page courante, ce qui génère plusieurs appels à la page. C'est une cause de problèmes de performances sur de nombreux sites ! Ce dernier point concerne tous les navigateurs, et pas seulement IE.
En dehors de ces problèmes de src, sous IE il faut rattacher les noeuds au plus tôt au DOM une fois créés, en effet, si on crée tout un arbre avant de la rattacher on tombe dans un bug IE de fuite mémoire : en dehors du noeud racine tous les noeuds ainsi créés ne sont jamais supprimés de la mémoire.