Contents of iframe disappears after inserting it using jQuery.append_问答_开发者

Contents of iframe disappears after inserting it using jQuery.append

开发者 https://www.devze.com 2022-12-12 03:38 出处：网络

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

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>
开发者_Python百科<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. 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. 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...

It's a real show stopper for me, any help would he highly appreciated!

Thank you, Andrey

Takes to refresh the movement (appendTo) and does not locate either the 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