?
Solved

strange behavior with designMode under IE

Posted on 2006-04-19
5
Medium Priority
?
381 Views
Last Modified: 2010-05-18
I have an iframe.. I want to toggle designMode on and off. I have a function to do it like:

function ToggleDesignMode(bOn)
{
    // Save the contents of the iFrame..
    var strBody = document.getElementById("e_body").contentWindow.document.body.innerHTML;

    // Toggle design mode on/off.
    document.getElementById("e_body").contentWindow.document.designMode = bOn ? 'on' : 'off';

    // Set the contents back again.
    document.getElementById("e_body").contentWindow.document.body.innerHTML = strBody;
}

This whole function was created in an attempt to get IE to work.. If I just toggle the designMode attribute, in IE all the contents of the iframe will be deleted. So I have this function to store the contents while the mode is being toggled, then set the contents back afterwards. Is this really necessary?

This function actually fails when I try to set the body text back in the last call - oddly if I put an alert box right before it, it seems to work ok!? My guess is that there's some synchronization thing going on in which the mode hasn't been set yet or something?

Any help would be great, I've wasted a lot of time on this,
Thanks
0
Comment
Question by:minnirok
  • 2
  • 2
5 Comments
 
LVL 7

Expert Comment

by:bubbledragon
ID: 16495146
Hi, what the variable 'bOn' use for?

If your bOn passed 'on' or 'off', just assign the variable to designMode
document.getElementById("e_body").contentWindow.document.designMode = bOn;

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 16495327
If it is a timing issue, try this:


strBody = "";
function ToggleDesignMode(bOn)
{
    // Save the contents of the iFrame..
    var strBody = document.getElementById("e_body").contentWindow.document.body.innerHTML;

    // Toggle design mode on/off.
    document.getElementById("e_body").contentWindow.document.designMode = bOn ? 'on' : 'off';

    // Set the contents back again.
    setTimeout('resetIt()',100)
}
function resetIt() {
  document.getElementById("e_body").contentWindow.document.body.innerHTML = strBody;
}
0
 
LVL 7

Author Comment

by:minnirok
ID: 16497795
@bubbledragon

I use the bOn just as a flag to say do I want design mode on or off - you're right, I could just instead pass the text 'on' or 'off' to the function, it would do the same thing.

@mplungian

I'll give that timing a try.

But why do we need to have this delay anyways - it's bizarre that IE needs to let some time elapse before executing that third call?

Thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 16497841
Perhaps it is simply taking too many resources to be able to finish in the micro second it takes to go to the next statement
0
 
LVL 7

Author Comment

by:minnirok
ID: 16502451
I guess so, it's so strange though. I can't find any information on it, I'd just like some reference that says:

    'setting designMode in IE takes a few milliseconds'

right now we're just guessing that's what's going on!

Thanks
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question