SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast BurakUeda's Avatar
    Join Date
    Apr 2005
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    designMode="on" bug?

    It seems I cannot set designMode to on, if I create the iframe on the fly.
    This code won't work. It creates iframe, displays contents but designMode cannot be turned on:
    HTML Code:
    <style type="text/css">
    #message {
    	width:500px;
    	height:200px;
    }
    
    </style>
    <script language="javascript" type="text/javascript">
    function create(){
    	var iframe = document.createElement("iframe")
    	iframe.setAttribute("id","message");
    	iframe.setAttribute("src","loremipsum.html");	
    	
    	document.getElementById("container").appendChild(iframe);
    	
    	iframe.contentDocument.designMode="on";
    }
    </script>
    <body>
    <div id="container">
    <input name="" type="button" value="Hit" onclick="create()"><br />
    
    </div>
    </body>
    However, this works:
    HTML Code:
    <script language="javascript" type="text/javascript">
    function change(id) {
    	var el = document.getElementById(id);
    	el.contentDocument.designMode = "on";	
    }
    </script>
    <body>
    <iframe src="loremipsum.html" width="500" height="200" id="frame"></iframe><br />
    
    <input name="" type="button" value="Hit" onclick="change('frame')">
    </body>
    Only difference is, iframe is created by JS in the first example, but it is hardcoded in second.

    Is this a known bug? Or any solutions for this?

    Regards.
    H u m o
    Uncensored Forums for Intelligent People

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Location
    Sydney, Australia
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I believe that the way mozilla renders objects created with createElement, then appended using appendChild are not done instantly, where as in Internet Explorer it is, so if you try to split your code into 2 functions and use setTimeOut with a small amount of time to delay the actual designMode=on command, this will fix the problem.. i hope
    Kind Regards,
    Steve
    http://www.rtepad.com

  3. #3
    SitePoint Enthusiast BurakUeda's Avatar
    Join Date
    Apr 2005
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Steve@rtePad View Post
    Hi,

    I believe that the way mozilla renders objects created with createElement, then appended using appendChild are not done instantly, where as in Internet Explorer it is, so if you try to split your code into 2 functions and use setTimeOut with a small amount of time to delay the actual designMode=on command, this will fix the problem.. i hope
    Thank you Steve.
    I guess you are right about the time. I put another button for turning on the designMode, and it worked.

    That lead me to another solution:
    HTML Code:
    <style type="text/css">
    #message {
    	width:500px;
    	height:200px;
    }
    
    </style>
    <script language="javascript" type="text/javascript">
    function create(){
    	var iframe = document.createElement("iframe") // Create the iframe
    	iframe.setAttribute("id","message"); // Give an ID
    	iframe.setAttribute("src","loremipsum.html"); // Load the contents, or you can just put "about:blank"
    	iframe.setAttribute("onload","javascript:this.contentDocument.designMode='on'"); // This is doing the trick. It turns the mode on when iframe loads :D
    	
    	document.getElementById("container").appendChild(iframe); // Lastly append the iframe inside the "container" DIV.
    }
    
    </script>
    <body onload="change('message')">
    <div id="container">
    <input name="" type="button" value="Hit" onclick="create()"><br />
    
    </div>
    </body>
    Works.... Thanks a bunch
    H u m o
    Uncensored Forums for Intelligent People


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •