Menu
I am in quite the strange predicament. I’m developing one of those newfangled HTML Editors (using .contentsEditable on a DIV tag) and have a fairly major problem when trying to work with an IFRAME element inside that editor. I write the IFRAME dynamically and stick some contents into it using the .write() method, and all of that goes well. The problem is that when I drag and drop the IFRAME to another place within the editor, it’s contents disappear! Sounds like a little Microsoft Magic to me.
My code is pasted below. If you want to see this thing in action (without downloading and running the code), I also uploaded it to [URL=http://www.grinn.net/temp/stupidCode.htm]http://www.grinn.net/temp/stupidCode.htm
[CODE]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Divs over cells.</title>
<script>
<!—
function offW(el) {
// Return the width of an element.
var w;
w = el.offsetWidth;
return w;
}
function offH(el) {
// Return the height of an element.
var h;
h = el.offsetHeight;
return h;
}
function makeEditable() {
document.getElementById(“layoutBox”).contentEditable = true;
}
function encloseItems() {
var e = document.createElement(‘<iframe name=”testFrame”></iframe>’);
var editor = document.getElementById(“layoutBox”).document;
var curSpan = editor.getElementById(“testCell”);
e.id = “testFrame”;
e.width = (offW(curSpan)*1.0185)+19;
e.height = offH(curSpan)+4;
e.marginHeight = 0;
e.marginWidth = 0;
var preserve = curSpan.innerHTML;
curSpan.replaceNode(e);
e = document.frames[“testFrame”]
var frameDoc = e.document;
frameDoc.open();
frameDoc.write(preserve);
frameDoc.close();
}
function getHTML() {
return document.frames[“testFrame”].document.body.innerHTML;
}
//—>
</script>
</head>
<body onLoad=”makeEditable()”>
This is the editor:
<div id=”layoutBox” style=”border: 2px ridge Black; height:250px;”>
<span id=”testCell”><b>This is the iFrame “testFrame”</b><br>If you drag and drop it, it will loose it’s contents.</span><br>
This is some text.
</div>
<form name=”form1″>
<input type=”button” onClick=”alert(getHTML());” value=”Show testFrame innerHTML”>
</form>
<script>encloseItems();</script>
</body>
</html>