2010-07-15 4 views
2

j'ai rencontré un comportement étrange dans Firefox avec ce script simple:comportement étrange Firefox lorsque vous travaillez avec javascript sur un iframe

<html> 
     <head> 
     <script type="text/javascript"> 
      window.setTimeout(function(){ 
       var ifr=document.createElement("iframe"); 
       ifr.src="about:blank"; 
       document.body.appendChild(ifr); 
       var doc=ifr.contentDocument || ifr.contentWindow.document, 
        div=doc.createElement("div"); 
       div.innerHTML="test"; 
       window.setTimeout(function(){ 
        doc.body.appendChild(div); 
       },500); 
      },500); 
     </script> 
    </head> 
    </html> 

Ce morceau de code crée une iframe vide et l'ajoute le corps du page actuelle, alors il crée un élément div qui contient un texte simple et l'ajoute au corps de l'iframe.

Dans tous les navigateurs (IE, Safari, Chrome, Opera) cela fonctionne, mais dans Firefox (j'utilise la version 3.6.3) le div n'apparaît pas dans l'iframe et aucune erreur n'est levée.

Je pense qu'il doit y avoir une erreur stupide quelque part mais je ne peux pas le trouver, avez-vous une idée? PS: ceux window.setTimeout sont juste un moyen simple de s'assurer que le dom est chargé dans la page et dans l'iframe.

Répondre

5

Vous devez envelopper la récupération du document iframe dans le délai d'expiration.

 window.setTimeout(function(){ 
      var doc=ifr.contentWindow.document || ifr.contentDocument; 
      var div=doc.createElement("div"); 
      div.innerHTML="test"; 
      doc.body.appendChild(div); 
     },500); 

Voir http://jsfiddle.net/xeGSe/1/

+0

Je savais qu'il y avait une explication simple :) merci cela fonctionne parfaitement – mck89

+0

qui n'est pas une explication, il est une solution pour le problème de base qui ne résout pas complètement. – roryf

+0

J'ai essayé de le réécrire en utilisant jQuery mais j'ai quand même dû utiliser un timeout. Des idées - http://jsfiddle.net/xeGSe/2/? – Castrohenge

1

On dirait un problème de synchronisation que vos appels setTimeout ne rattrapent pas. Mieux vaut utiliser onload événements pour assurer que les éléments sont vraiment disponibles (DOMReady serait mieux mais pas aussi facile dans IE). Essayez ceci:

document.body.onload = function() { 
    var iframe = document.createElement("iframe"); 
    iframe.src = "about:blank"; 
    iframe.onload = function() { 
     var doc = iframe.contentDocument || iframe.contentWindow.document, 
      div = doc.createElement("div"); 
     div.innerHTML="test"; 
     doc.body.appendChild(div); 
    } 
    document.body.appendChild(iframe); 
}