I have a CMS system that uses an HTML widgeditor.
When a div with a correct class is clicked a floating div pops up where the user can edit the html etc.
This div uses an iframe and there is an issue with IE that won't allow relative links to be added to iframe.
http://www.thescripts.com/forum/thread89029.html
http://freetextbox.com/forums/thread/4977.aspx
I need the ability to add relative links, the cms sys is also used by our admin guys to set up html/text etc for other sites from this site. Anyway I used the example in that link and came up with a function to replace the old .innerHTML call but now the events that were firing (keydown,mouseup,keyup) are not firing in IE.
So I have tried writing the event handlers inline to this function so that they are included into the iframe however they are still not firing. If I take the html for the iframe out and put it in a page by itself it works fine so why isn't it working when its in the iframe.
Any help would be much appreciated.
The function that replaces the innerHTML call is:
var iframeTemplate = "\
<html>\
<head>\
<link href=\"INSERT:STYLESHEET:END\" rel=\"stylesheet\" type=\"text/css\" />\
</head>\
<body id=\"iframeBody\">\
INSERT:CONTENT:END\
</body>\
INSERT:EVENTS:END\
</html>\
";
var iframeEvents = "\n<script type=\"text/javascript\">\n"
iframeEvents += "<!--\n"
iframeEvents += "var myElem = document.getElementById('iframeBody');\n"
//iframeEvents += "var myElem = document.getElementsByTagName('body')[0] ;\n"
iframeEvents += "if (myElem.attachEvent)\n"
iframeEvents += "{\n"
iframeEvents += "myElem.attachEvent(\"onmouseup\", testEvent);\n"
iframeEvents += "myElem.attachEvent(\"onkeyup\", testEvent);\n"
iframeEvents += "myElem.attachEvent(\"onkeydown\", testEvent);\n"
iframeEvents += "}\n"
iframeEvents += "else\n"
iframeEvents += "{\n"
iframeEvents += "myElem.addEventListener(\"mouseup\", testEvent, false);\n"
iframeEvents += "myElem.addEventListener(\"keyup\", testEvent, false);\n"
iframeEvents += "myElem.addEventListener(\"keydown\", testEvent, false);\n"
iframeEvents += "}\n"
iframeEvents += "function testEvent(){alert('event firing!')};\n"
iframeEvents += "//-->\n"
iframeEvents += "</script>\n"
/*
**** Use this function instead of innerHTML as in IE iframes dont support relative links ******
*/
function CopyHtmlToIframe(iframe, HTML){
var documentTemplate = iframeTemplate
/* Insert dynamic variables/content into document */
documentTemplate = documentTemplate.replace(/INSERT:STYLESHEET:END/, widgStylesheet);
documentTemplate = documentTemplate.replace(/INSERT:CONTENT:END/, HTML);
documentTemplate = documentTemplate.replace(/INSERT:EVENTS:END/, iframeEvents);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(documentTemplate);
iframe.contentWindow.document.close();
}
If I take the rendered html out and put it in a file by itself like the following it works fine:
<html>
<head>
<link href="/jobboard/widgeditor/css/widgContent.css" rel="stylesheet" type="text/css" />
</head>
<body id="iframeBody">
<P>Praesent sed nibh eget justo tristique commodo. Phasellus justo dolor, vulputate nec, mollis ac, tempus et, orci. Praesent et justo eget quam aliquam tristique. Nam vitae mi sit amet odio viverra aliquet. Nunc eleifend felis in leo. Vivamus rhoncus turpis ut lorem. Phasellus sollicitudin, pede quis lobortis laoreet, pede nibh elementum nunc, vel pellentesque turpis dui et felis. Cras lorem nulla, vulputate condimentum, pellentesque id, mattis eget, ipsum. Proin sit amet elit. Aliquam aliquet pede at ipsum. Sed malesuada condimentum nulla. Praesent urna est, feugiat ac, pellentesque nec, condimentum non, lacus. Praesent congue vestibulum libero. Quisque non pede. Sed eu tellus nec nulla ultricies ornare.</P>
</body>
<script type="text/javascript">
<!--
var myElem = document.getElementById('iframeBody');
if (myElem.attachEvent)
{
myElem.attachEvent("onmouseup", function(){testEvent(); return true;});
myElem.attachEvent("onkeyup", function(){testEvent(); return true;});
myElem.attachEvent("onkeydown", function(e){testEvent(); return true;}, false);
}
else
{
myElem.addEventListener("mouseup", function(){testEvent(); return true;}, false);
myElem.addEventListener("keyup", function(){testEvent(); return true;}, false);
myElem.addEventListener("keydown", function(e){testEvent(); return true;}, false);
}
function testEvent(){
alert('event firing!')
};
//-->
</script>
</html>
I am hoping those event handlers will call functions that are declared in the document that includes the iframe but at the moment I can't even get this test function to fire.
Thanks in advance for any help or advice Rob
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Trouble getting events to fire in an iframe
Linear Mode
