IE8 Crashes Strangely on JavaScript Popup

Question

I am facing a strange issue after the popup is created onclick. The popup opens up but hangs immediately on IE8 (works fine on all the other browsers including IE6). But on adding the alertbox as show in the JavaScript code, the popup works fine.

I am using **https** and not **http** and i feel popup is not able to load the JS file because of SSL.

Here is the how i am generating the onclick event:

<a id="forgotPasswordLink" href="#" onclick="openSupportPage();"> Some Text </a>

The onclick function is defined this way:

        function openSupportPage() {
            var features = "width=700,height=400,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes";
            var winId = window.open('', '', features);
            winId.focus();
            winId.document.open();
            winId.document.write('<html><head><title>' + document.title + '</title><link rel="stylesheet" href="./css/default.css" type="text/css">\n');
            var is_ie6 = (
            window.external && typeof window.XMLHttpRequest == "undefined");
            alert(is_ie6);/*The JS include below*/
                          /*works in popup only with this alert box.*/
                          /*else IE8 Hangs*/
                winId.document.write('<script src="../js/tiny_mce/tiny_mce.js" type="text/javascript">Script_IE8</script>\n');


            winId.document.write('<script type="text/javascript">\n');
            winId.document.write('function inittextarea() {\n');
            winId.document.write('tinyMCE.init({  \n');
            winId.document.write('elements : "content",\n');
            winId.document.write('theme : "advanced",\n');
            winId.document.write('readonly : true,\n');
            winId.document.write('mode : "exact",\n');
            winId.document.write('theme : "advanced",\n');
            winId.document.write('readonly : true,\n');
            winId.document.write('setup : function(ed) {\n');
            winId.document.write('ed.onInit.add(function() {\n');
     winId.document.write('tinyMCE.activeEditor.execCommand("mceToggleVisualAid");\n');
            winId.document.write('});\n');
            winId.document.write('}\n');
            winId.document.write('});}</script>\n');
            winId.document.write('</head><body onload="inittextarea()">\n');
            winId.document.write('  \n');
            var hiddenFrameHTML = document.getElementById("HiddenFrame").innerHTML;
            hiddenFrameHTML = hiddenFrameHTML.replace(/&amp;/gi, "&");
            hiddenFrameHTML = hiddenFrameHTML.replace(/&lt;/gi, "<");
            hiddenFrameHTML = hiddenFrameHTML.replace(/&gt;/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(/&amp;/gi, "&");
            hiddenFrameHTML2 = hiddenFrameHTML2.replace(/&lt;/gi, "<");
            hiddenFrameHTML2 = hiddenFrameHTML2.replace(/&gt;/gi, ">");
            winId.document.write(hiddenFrameHTML2);
            winId.document.write('</body></html>\n');
            winId.document.close();
    }

Please help me on this one. I could provide more information on this if needed.

I have referred to these posts already:

Importing js file in https page using http URL in IE8

Force Browser Mode=IE8 and document mode=IE8 Standards

Additional Information:

Screen shot of the page

Rendered HTML

Original JSPF

why is the JavaScript in two different places? `./` current directory and `../` parent directory — Nalum, May 31 '10 at 13:59
when does IE crash in a way that isn't strange? of course, it may be stranger to see it work as expected... — Joe Mastey, May 31 '10 at 14:00
@Nalum I am using different JS files for these browsers. But i could merge them.But i could merge them I tried with a single JS file and that didn't help — dkris, May 31 '10 at 14:04
@Nalum Tried merging the 2 files and have updated the above code as well. But still the popup works only with alert(); — dkris, May 31 '10 at 14:15
What do `HiddenFrame` and `HiddenFrame2` contain? Do you have an example page, so we can step through your code? — Marcel Korpel, May 31 '10 at 14:27
@Marcel Here is a screenshot http://img231.imageshack.us/img231/7190/72961203.png and here is the code snippet http://pastebin.org/295861 . Hope this helps — dkris, May 31 '10 at 14:50
I suspect [this code](http://pastebin.org/295861) contains the result in your new window `winId`. But what do the original `HiddenFrame` and `HiddenFrame2` contain? E.g., are they real frames, including a new `` and ``? Besides, why is that `Script_IE8_IE6` inside your ` — Marcel Korpel, May 31 '10 at 15:09
@Marcel I have added the DOCTYPE and removed the `Script_IE8_IE6` within the script includes. this doesn't seem to help. Also here is the original .jspf page before the page gets rendered http://pastebin.org/296864 This doesn't seem to help — dkris, Jun 01 '10 at 05:53
@Marcel Also, i have commented out all the lines in the code http://pastebin.org/296871 and retained only the `` include tag. This is crashing IE8, which i believe hints that it is this line that might be breaking. — dkris, Jun 01 '10 at 05:59
Nice you deduced your issue to this. So IE 8 doesn't crash without that element? And what happens if you load an arbitrary JavaScript file (to see if the problem has something to do with (your version of) tiny_mce.js or with scripts being included in a new window this way)? And, just curious, what happens if you use HTML instead of XHTML (like ` `)? I don't think the latter will make any difference, but you have to try things... — Marcel Korpel, Jun 01 '10 at 12:31
@Marcel as of now I am using the latest version of TinyMCE. I have also changed the doctype to ` ` with no effect. — dkris, Jun 01 '10 at 12:37

score 0 · Accepted Answer · edited May 23 '17 at 12:19

Here is the final working function which solved my issue and works in IE6, IE7, IE8, Chrome, Firefox, Safari and Opera.

function openSupportPage() {
    var features="width=700,height=400,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes";            
    var winId=window.open('','',features);
    winId.document.open();
    winId.document.write('<html><head><title>' + document.title + '</title><link rel="stylesheet" href="../css/default.css" type="text/css">\n');

    window.setTimeout(function () {
        winId.document.write(
          '<script src="../js/tiny_mce/tiny_mce.js" type="text/javascript"></scr' + 'ipt>\n'
        );
    }, 10);

    winId.document.write('<script type="text/javascript">\n');
    winId.document.write('function inittextarea() {\n');
    winId.document.write('tinyMCE.init({  \n');  
    winId.document.write('elements : "content",\n');
    winId.document.write('theme : "advanced",\n');
    winId.document.write('readonly : true,\n');
    winId.document.write('mode : "exact",\n');
    winId.document.write('theme : "advanced",\n');
    winId.document.write('readonly : true,\n');
    winId.document.write('setup : function(ed) {\n');
    winId.document.write('ed.onInit.add(function() {\n');
    winId.document.write('tinyMCE.activeEditor.execCommand("mceToggleVisualAid");\n');
    winId.document.write('});\n');
    winId.document.write('}\n');
    winId.document.write('});}</script>\n');

    window.setTimeout(function () {
        winId.document.write('</head><body onload="inittextarea()">\n');
        winId.document.write('  \n');
        var hiddenFrameHTML = document.getElementById("HiddenFrame").innerHTML;
        hiddenFrameHTML = hiddenFrameHTML.replace(/&amp;/gi, "&");
        hiddenFrameHTML = hiddenFrameHTML.replace(/&lt;/gi, "<");
        hiddenFrameHTML = hiddenFrameHTML.replace(/&gt;/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(/&amp;/gi, "&");
        hiddenFrameHTML2 = hiddenFrameHTML2.replace(/&lt;/gi, "<");
        hiddenFrameHTML2 = hiddenFrameHTML2.replace(/&gt;/gi, ">");
        //hiddenFrameHTML2 = hiddenFrameHTML2.replace(/&amp;/gi, "&").replace(/&lt;/gi, "<").replace(/&gt;/gi, ">");
        winId.document.write(hiddenFrameHTML2); 
        winId.document.write('</body></html>\n');
        winId.document.close();
    }, 300);
}

I got a lot of help from these questions:

Thank you all.

IE8 Crashes Strangely on JavaScript Popup

1 Answers1

Linked