Javascript Question
element print preview is blank and prints blank pages in Google Chrome
I am using this jQuery code from Print the contents of a DIV to print the contents of an overlay div:
function PrintElem(elem){
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'title', 'height=666,width=1000');
mywindow.document.write('<html><head><title>title-title</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('<link rel="stylesheet" href="includes/css/main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
It was working perfectly fine until a recent Google Chrome update, which causes it to show blank print preview and print blank pages.
I did some research about this and found out that the best solution would probably be to add some $(window).load(function() to make the print() fire only after the popup has been fully loaded, but I am not sure how to integrate it or modify this correctly.
Any suggestions?
EDIT:
As suggested by someone on the original stackoverflow question, I tried modifying the function to add
mywindow.document.write('<script type="text/javascript">$(window).load(function() { window.print(); window.close(); });</script>');
But this broke the function entirely, I guess because of the
</script>This is how my broken modified function looks like:
function Popup(data)
{
var mywindow = window.open('', '316steel.com Shopping Cart', 'height=666,width=1000');
mywindow.document.write('<html><head><title>316steel Jewelry Corporation - Shopping Cart</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('<link rel="stylesheet" href="includes/css/main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('<script type="text/javascript">$(window).load(function() { window.print(); window.close(); });</script>');
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
// mywindow.print();
// mywindow.close();
return true;
}
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
Since the <script></script> tags are breaking the code, try using this line :
mywindow.document.write('<scr'+'ipt type="text/javascript">$(window).load(function() { window.print(); window.close(); });</scr'+'ipt>')
And without jQuery :
mywindow.document.write('<scr'+'ipt type="text/javascript">function PrintPage() { window.print(); window.close(); } window.onload = PrintPage;</scr'+'ipt>');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download