使用jQuery.append插入后，iframe的内容消失

Question

Please consider this code: 请考虑以下代码：

<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>

In IE it works fine and preserves test in the frame ("Some test text") as well as it keeps it in design mode. 在IE中，它可以正常工作并将测试保留在框架中（“某些测试文本”），并将其保持在设计模式下。 In FF/Chrome/Opera it wipes out all content of the iframe - if you inspect it's DOM with FireBug you can see that iframe.body lost it's class "some-class" as well as all text and it's not in design mode. 在FF / Chrome / Opera中，它会擦除iframe的所有内容-如果使用FireBug检查它是DOM，则可以看到iframe.body丢失了它的“ some-class”类以及所有文本，并且它不在设计模式下。 Any ideas how to overcome this problem? 任何想法如何克服这个问题？ The original problem is that all rich text editors fail to work in a jQuery.dialog in those browsers and I tracked the problem down to the above-mentioned fact... 最初的问题是所有富文本编辑器在这些浏览器中都无法在jQuery.dialog中工作，而我将问题归结为上述事实。

It's a real show stopper for me, any help would he highly appreciated! 对我来说，这是一个真正的表演障碍，他将不胜感激！

Thank you, Andrey 谢谢你，安德烈

Answer 1

Takes to refresh the movement (appendTo) and does not locate either the iframe: 需要刷新运动（appendTo），并且没有找到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>

Edition : for it is understood 版本：据了解

使用jQuery.append插入后，iframe的内容消失

问题描述

1 个解决方案

解决方案1
-1 2009-11-19 19:57:24

使用jQuery.append插入后，iframe的内容消失

问题描述

1 个解决方案

解决方案1 -1 2009-11-19 19:57:24

解决方案1
-1 2009-11-19 19:57:24