Question

请考虑以下代码：

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

在IE中它可以正常工作并保留帧中的测试（“一些测试文本”）以及它保持在设计模式。在FF / Chrome / Opera中，它会删除iframe的所有内容 - 如果你使用FireBug检查它的DOM，你会发现iframe.body失去了它的类“some-class”以及所有文本而且它不在设计模式中。任何想法如何克服这个问题？最初的问题是所有富文本编辑器都无法在这些浏览器中的jQuery.dialog中工作，我将问题跟踪到上述事实......

对我来说这是一个真正的表演限制，任何帮助都会非常感谢！

谢谢你，安德烈

Answer 1

需要刷新移动（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>

版：因为它被理解

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

1 个答案: