designMode not working with IE

Bob Rivers · Mar 3, 2005

Hi,

I'm trying to build a web page where the user can insert text
dinamically. When the user hits a button, a new text box is created and
the user can insert text into it.

It's working nice with Firefox 1.0, but it's not working with IE
6.0.2800.1106 (W2K SP4)

function addText() {
doc = document.getElementById("desktop");

myIframe = document.createElement("iframe");
myIframe.id = "editFrame";
myIframe.name = "editFrame";
myIframe.style.border = "1px dotted";
myIframe.style.position = "relative";

doc.appendChild(myIframe);

if(document.all) {
document.editFrame.document.designMode = 'On';
} else {
document.getElementById("editFrame").contentDocument.designMode =
"on";
}
}

I did a test putting it inside an static page (below) and it worked.

<HTML>
<HEAD></HEAD>
<BODY>
<IFRAME NAME="editFrame"></IFRAME>
<SCRIPT>
document.editFrame.document.designMode = 'On';
</SCRIPT>
</BODY>
</HTML>

So, is it possible to do it on the fly? Any help?

TIA,

Bob

Martin Honnen · Mar 3, 2005

Bob Rivers wrote:

I'm trying to build a web page where the user can insert text
dinamically. When the user hits a button, a new text box is created and
the user can insert text into it.

If you want a text box then use the DOM to create a textarea element e.g.
var textarea;
if (document.createElement && (textarea =
document.createElement('textarea'))) {
textarea.name = 'textareaName';
textarea.rows = 5;
textarea.cols = 40;
someElement.appendChild(textarea);
}

It's working nice with Firefox 1.0, but it's not working with IE
6.0.2800.1106 (W2K SP4)

So what happens with IE, do you get an error message?

It might be that you need to make sure that some document is in the
iframe before you try to script the document and its designMode property.

The following example here creates the iframe without problems with
Firefox 1.0, Netscape 7.2, and IE 6:

<html lang="en">
<head>
<title>dynamically creating an editable iframe with Mozilla and
IE/Win</title>
<script type="text/javascript">
function createEditableIframe (iframeName, parentElement, initialContent) {
var iframeElement;
if (document.createElement && (iframeElement =
document.createElement('iframe'))) {
iframeElement.id = iframeName;
iframeElement.name = iframeName;
iframeElement.width = '100%';
iframeElement.height = '200';
parentElement.appendChild(iframeElement);
var iframeWin = window.frames[iframeName];
if (iframeWin) {
iframeWin.document.open();
iframeWin.document.write(initialContent);
iframeWin.document.close();
iframeWin.document.designMode = 'on';
iframeWin.focus();
}
}
}

window.onload = function (evt) {
createEditableIframe(
'editFrame',
document.body,
[ '<html lang="en">',
'<head>',
'<title>example content<\/title>',
'<\/head>',
'<body>',
'<p>Try to edit this content.<\/p>',
'<\/body>',
'<\/html>'
].join('\r\n')
);
};
</script>
</head>
<body>

<h1>dynamically creating an editable iframe with Mozilla and IE/Win</h1>

</body>
</html>

Adam Ratcliffe · Mar 3, 2005

Hi Bob

You might also want to take a look at HTMLArea,
http://www.interactivetools.com/freescripts/htmlarea.html. It provides
some extended editing features.

Cheers
Adam

Bob Rivers · Mar 5, 2005

Hi,

Thanks. It worked.

Bob

Slideshow not working properly	2	Jan 7, 2023
Image upload not working in browser	4	Sep 9, 2022
Script to send email not working	1	Apr 10, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Border attribute not working	1	Sep 3, 2018
Help with code	0	Jun 12, 2022
Is it possible an iframe can overlapp another?	3	Apr 20, 2022
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021

designMode not working with IE

Bob Rivers

Martin Honnen

Adam Ratcliffe

Bob Rivers

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads