Iframe designmode in Firefox problem

Question

This works in IE, but in firefox it's very strange:

If open it normally if firefox, the designmode doesn't work but if i put a breakpoint on

this.editor.contentWindow.document.designMode = "On";

line, and then release it (after it breaks on it), the designmode works!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script type="text/javascript">



TheEditor = function() {  
    this.editor = null;
    this.mainDiv=document.getElementById("mainDiv"); 
}

TheEditor.prototype = {

      InitializeEditor: function() {


        this.editor=document.createElement('iframe');
        this.editor.frameBorder=1;
        this.editor.width = "500px";
        this.editor.height="250px";       

        this.mainDiv.appendChild(this.editor);

        this.editor.contentWindow.document.designMode = "On";       
    }     


}
            window.onload = function(){
                obj = new TheEditor;
                obj. InitializeEditor();
            }
        </script>
    </head>
    <body>
       <div id="mainDiv">
    </div>
    </body>
</html>

Answer 1

我认为这是因为contentDocument尚未创建，我认为您还可以在此事件中设置iframe的onload事件并设置设计模式，因为在加载页面时调用此事件，所以contentDocument存在！

Answer 2

I don't full understand why, but opening (optionally writing content) and closing the document solves the issue (at least in FF5 on OSX):

this.editor.contentWindow.document.open();
// optionally write content here
this.editor.contentWindow.document.close();
this.editor.contentWindow.document.designMode = "on";

The other idea I had was to set a timeout around the designMode = "on" statement (I remember having to do this in the past for FF), but it did not work.

I think it has something to do with FF loading "something" in the IFRAME and it not being ready to turn designMode on.

I guess you could also use the contentEditable="true" attribute on the DIV instead.

Anyway, I hope this helps.

Iframe designmode in Firefox problem

Question

2 answers

solution1
0 2012-07-23 13:08:21

solution2
0

Iframe designmode in Firefox problem

Question

2 answers

solution1 0 2012-07-23 13:08:21

solution2 0

solution1
0 2012-07-23 13:08:21

solution2
0