views:

332

answers:

1

I have an issue where the JavaScript source file is loading in popup for IE6, Chrome, Firefox, Safari and Opera. But the same source file is not loading up in IE8.

As a result of this the HTML is not being replaced in the Popup and I am getting an error in IE8 popup saying tinyMCE is not defined

I have referred to http://stackoverflow.com/questions/2949234/formatting-this-javascript-line and solved issue on all browsers except IE8.

The JavaScript function is as follows:

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');

    var winDoc = winId.document;
    var sEl = winDoc.createElement("script");
    sEl.src = "../js/tiny_mce/tiny_mce.js";/*TinyMCE source file*/
    sEl.type="text/javascript";
    winDoc.getElementsByTagName("head")[0].appendChild(sEl);

    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 () {/*using setTimeout to wait for the JS source file to load*/
        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();
    }, 300);
}

Additional Information:

please help me with this one.

+1  A: 
  1. Why are you using actual DOM functions to add the <script> tag that includes tinymce.js but everything else is using document.write?

  2. I think that's also where your problem lies, as <head> is within <html>, which is not yet closed where you want to append said <script> tag.

  3. Otherwise, you could use the existing <script> tag in the popup to add the code that includes the required external javascript file. If that makes any sense.

So, basically I'm saying, try it the same way as everything else is in your script, using document.write.

(quick addition) I'm not saying this is the 'best' way to do this, I would recommend creating an actual page instead of dynamically creating one in the popup. But in this scenario, I think what I wrote earlier might solve the problem you are having.

CharlesLeaf
I was trying out options! Thanks a lot. Your answer helped me.
dkris