开发者

Javascript window.open and print causing IE8 to hang

I am trying to use window.open() to create a pop up that then prints, but I am running into problems with IE8 hanging up after it brings up the pop up.


More detail:

At the end of my app, I am trying to print the information that is output but I am trying to include a separate CSS, jQuery and Javascript in that popup. I think it is these external links that are causing IE8 to hang up but I'm not sure.

What happens in all other browsers that I have tested, is the window pops up, the print dialog appears, and prints fine.

In IE8, the window pops up, the content appears and the CSS appears to load, but not the Javascript. If you try to print manually (Ctrl+P), it prints without the CSS.

I have tried following the examples here: Script elements written with document.write in a window opened with window.open are not executed in IE8 on Windows 7


Live demo

If you do want to see a live version, please visit: http://roxulmaterialscalculator.com/ You will have to fill out the info required by the app if you do want to reach the print portion. (On the second step, just filling out the radio inputs is required).

To see the full javascript: http://roxulmaterialscalculator.com/js/scripts.js where you will find other methods that I have tried.


Code

Passes the elements to the function

$('#actionPrint').live('click', function(event){
    printElem('#rc');
}

Pops up the element and prints it.

function printElem(elem) {
    popup($j(elem).html());
}

 function popup(data) {
    var mywindow = window.open('', 'printSheet', 'height=500,width=800,scrollbars=1');
    mywindow.document.open();
    mywindow.document.write('<html><head><title>Roxul Insulation Calculator</title>');
    mywindow.document.write('</head><body>');
    mywindow.document.write('<div id="rc_logo"><img src="img/roxul-logo.png" alt="roxul-logo" /></div>');
    mywindow.document.write开发者_运维问答(data);
    mywindow.document.write('</body></html>');

    var c = mywindow.document.createElement("link");
        c.rel = "stylesheet";
        c.type = "text/css";
        c.href = "css/print.css";
        mywindow.document.getElementsByTagName("HEAD")[0].appendChild(c);

    var s = mywindow.document.createElement("script");
        s.type = "text/javascript";
        s.src = "js/jquery-1.5.2.min.js";
        mywindow.document.getElementsByTagName("HEAD")[0].appendChild(s);

    var s2 = mywindow.document.createElement("script");
        s2.type = "text/javascript";
        s2.src = "js/print.js";
        mywindow.document.getElementsByTagName("HEAD")[0].appendChild(s2);

    mywindow.print();
    return true;
 }


I have solved my own question, so hopefully it's not bad form to answer one's own question.

My mistake was not including a mywindow.document.close(); at the end of my function. It now looks like the following:

mywindow.print();
mywindow.document.close();
return true;

I spoke with one of the developers that I work with and he says that the document.close() releases the resource to be printed.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜