2009-01-22 4 views
3

J'ai le code HTML/JS suivant:IE met en cache dynamiquement iframe ajouté. Pourquoi, et comment puis-je l'empêcher?

<html> 
    <body> 
    <script> 
     function foo(){ 
     var html = "<iframe src=\"foo.html\" />"; 
     document.getElementById('content').innerHTML=html; 
     } 

     function bar(){ 
     var html = "<iframe src=\"bar.html\" />"; 
     document.getElementById('content').innerHTML=html; 
     } 

     function show(){ 
     alert(document.getElementById('content').innerHTML); 
     } 
    </script> 
    <button onclick="foo()">foo</button><br /> 
    <button onclick="bar()">bar</button><br /> 
    <button onclick="show()">test</button><br />  

    <div id="content"></div> 
    </body> 
</html> 

Ce genre de travaux comme prévu, même dans IE. Jusqu'à ce que je frappe F5. Quand je clique d'abord sur foo, je reçois un iframe avec le contenu de foo.html, comme prévu. Je puis actualiser et appuyez sur bar. Au lieu d'obtenir le contenu de bar.html, je vois le contenu de foo.html. Bizarrement, quand je clique sur test, le alert() me dit que l'attribut src de l'iframe est correctement réglé sur bar.html. Firefox n'a pas ce problème. Pourquoi cela arrive-t-il et comment puis-je l'éviter?

modifier: ce que j'oublié de mentionner est que je ne peux pas mettre le iframe et changer l'attribut src. Dans la situation réelle que j'ai, parfois j'ai besoin d'un <img> plutôt qu'un .

Répondre

2

Avez-vous essayé de changer l'URL de votre iframe généré? E.g.

var randomNum = Math.random(); 
var html = "<iframe src=\"bar.html?rand="+randomNum+"\" />"; 

Mieux encore, moissonneuse-batteuse avec la suggestion appendChild() de geowa4.

2

Régler la SRC de l'iframe au lieu de changer le innerHTML de son contenant:

html:

<iframe id="myFrame" src="about:blank" /> 
scénario

:

document.getElementById('myFrame').src='foo.html' 
3

Utilisez ce DOM

<div id="content" style='display:none;'> 

    <iframe id='contentFrame' src='' /> 

</div> 

Et ceci comme vous r script

function foo() { 
    var contentDiv = document.getElementById('content'); 
    var contentFrame = document.getElementById('contentFrame'); 

    contentFrame.src = 'foo.html'; 
    contentDiv.style.display='block'; 
} 

J'ai remarqué un comportement étrange avec IE et l'utilisation de innerHTML. Je ne l'utiliserais que pour effacer le contenu (innerHTML = ""). Si je veux ajouter quelque chose, j'utilise HTMLElement.appendChild(); ça n'a pas encore échoué pour moi.