2009-11-19 3 views
1

S'il vous plaît considérer ce code:Contenu de iframe disparaît après l'insertion à l'aide jQuery.append

<html> 
<head> 
<title></title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> 
</head> 
<body> 

<div id="dlgDiv" style="width:202px; height:72px; border: solid 1px grey"></div> 
<iframe id="iView" style="width: 200px; height:70px; border: dotted 1px red" frameborder="0"></iframe> 

<script type="text/javascript"> 
    jQuery(document).ready(function() { 

     var doc = document.getElementById("iView").contentWindow.document; 

     doc.designMode = "On" 

     doc.open() 
     doc.write("<html><head></head><body class='some-class'>Some test text</body></html>"); 
     doc.close(); 

     jQuery("#iView").appendTo("#dlgDiv") 
    }) 
</script> 
</body> 
</html> 

Dans IE, il fonctionne très bien et préserve test dans le cadre (« Certains texte de test ») aussi bien qu'il le garde en mode conception. Dans FF/Chrome/Opera, il efface tout le contenu de l'iframe - si vous inspectez son DOM avec FireBug vous pouvez voir que iframe.body a perdu sa classe "some-class" ainsi que tout le texte et il n'est pas en mode design. Des idées pour surmonter ce problème? Le problème original est que tous les éditeurs de texte riche ne fonctionnent pas dans un jQuery.dialog dans ces navigateurs et j'ai dépisté le problème au fait mentionné ci-dessus ...

C'est un vrai bouchon de spectacle pour moi, toute aide serait il a grandement apprécié!

Merci, Andrey

Répondre

-1

Prend pour rafraîchir le mouvement (appendTo) et ne trouve pas non plus l'iframe:

<html> 
<head> 
<title></title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> 
</head> 
<body> 

<div id="dlgDiv" style="width:202px;height:72px;border:solid 1px grey"></div> 
<iframe id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe> 

<script type="text/javascript"> 

jQuery(document).ready(function() { 

    $("#iView").appendTo("#dlgDiv"); 
    setTimeout(function(){ 
     var iBody = $("#dlgDiv").find('#iView').contents().find("body"); // <----- 
     iBody.append("<div>my bad html</div>"); // old container 
     iBody.empty(); // empty body in iframe 
     iBody.append("Some test text"); //add container 
     iBody.append("<div>or something right</div>"); //add container 
     iBody.attr("class", "some-class"); //add class to body 
    }, 100); 

}) 

</script> 
</body> 
</html> 

édition car il est entendu

+0

Désolé, Je ne vois pas comment votre réponse est pertinente à ma question; donc -1. L'iframe non seulement perd le contenu mais perd également la valeur de designMode et les riches rendus d'éditeur de texte non utilisables – Andrey

+0

De ce que je peux voir vous êtes incertain javascript et jQuery, je vais passer l'amendement pour ajouter la classe. –

Questions connexes