I am trying to open a popup onclick using a function call as shown below.
<a id="forgotPasswordLink" href="#" onclick="openSupportPage(document.getElementById('forgotPasswordLink').innerHTML);"> Some Text </a>
I am creating the HTML for the pop up page on the fly and also including the TinyMCE source file over there.
The code is as shown below:
<script type="text/javascript">
<!--
function openSupportPage(unsafeSupportText) {
var features="width=700,height=400,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes";
var winId=window.open('','Test',features);
winId.focus();
winId.
document.open('text/html','replace');
winId.
document.write('<html><head><title>' +
document.title + '</title><link rel="stylesheet" href="./css/default.css" type="text/css">\n');
winId.
document.write('<script src="./js/tiny_mce/tiny_mce.js" type="text/javascript" language="javascript">Script_1</script>\n');
winId.
document.write('<script src="./js/support_page.js" type="text/javascript" language="javascript">Script_2</script>\n');
winId.
document.write('</head><body onload="inittextarea()">\n');/*function call which will use the TinyMCE source file*/
winId.
document.write(' \n');
winId.
document.write('<p> </p>');
var hiddenFrameHTML =
document.getElementById("HiddenFrame").innerHTML;
hiddenFrameHTML = hiddenFrameHTML.replace(/&/gi, "&");
hiddenFrameHTML = hiddenFrameHTML.replace(/</gi, "<");
hiddenFrameHTML = hiddenFrameHTML.replace(/>/gi, ">");
winId.
document.write(hiddenFrameHTML);
winId.
document.write('<textarea id="content" rows="10" style="width:100%">\n');
winId.
document.write(document.getElementById(top.
document.forms[0].id + ":supportStuff").innerHTML);
winId.
document.write('</textArea>\n');
var hiddenFrameHTML2 =
document.getElementById("HiddenFrame2").innerHTML;
hiddenFrameHTML2 = hiddenFrameHTML2.replace(/&/gi, "&").replace(/</gi, "<").replace(/>/gi, ">");
winId.
document.write(hiddenFrameHTML2);
winId.
document.write('</body></html>\n');
winId.
document.close();
}
// -->
</script>
The
support.js
file contains the following.
function inittextarea() {
tinyMCE.init({
elements : "content",
mode : "exact",
theme : "advanced",
readonly : true,
setup : function(ed) {
ed.onInit.add(function() {
tinyMCE.activeEditor.execCommand("mceToggleVisualAid");
});
}
});
}
The problem arises when the onclick event is fired and the pop up opens up, IE8 stops responding and seems to hang. It is working fine on Chrome, Firefox and Safari.
I feel that the issue is because of
TinyMCE script inclusion because on
commenting the lines that include the
tiny_mce.js and the support_page.js,
the popup renders with no issues.
I am also using the latest TinyMCE release.
Please let me know why this is happening and what could be the resolution.
