Safari print issue with javascript window.print()

Question

I am having an issue with print on Safari. My System is Windows 7, and this function works fine in all other browsers except Safari. Here is the situation:

window.onload = function(){
    console.log('before print');
    window.print();
}

It won't output the log in console panel, but the print page will appear first, after i choose cancel in print page, the log will be output.

Does any body came up with this issue? Any help will be appreciated.

Updated

Here is the situation i have: We need to print a page whose content can be changed by user by checking and unchecking check box, and only the content part of this page should be printed, so we create a new page that only contains the content for printing. In this page, we need to hide the unnecessary content that is not selected by user, so we need to do some DOM operation before window.print() get called. The console.log() is just an example code for observing. I tried to add an <div id='test'>Test HTML</div> in test HTML and add

var test = document.getElementById('test');
test.style.background = 'yellow';

before window.print();, it shows the same result in my Safari browser, the 'Test HTML' will not turn to yellow until i click cancel button in print panel, so it's not just the console.log issue.

Updated

I am using Safari 5.1.7(7534.57.2) on Windows 7

Answer 1

After several times trying, below code works, but i don't know the reason, can anybody explain? Or this is a Safari Bug?

window.onload = function() {
    $('body').html('After change');
    setTimeout(window.print, 1000);
};

Answer 2

For me, the setTimeout solution didn't work. I found this jQuery plugin https://github.com/jasonday/printThis that has plenty of workarounds for window.print() because it seems not to be fully supported by all browsers.

I took this line that worked for me Safari document.execCommand("print", false, null)

and this worked ok for me for now in safari and chrome

try {
  document.execCommand('print', false, null);
}
catch(e) {
  window.print();
}

Answer 3

This is odd behavior. I tested in Safari 6.1 on Mac.

But may I ask why you need to log something before the printing? Because it seems that all the functions are being executed before the printing panel pops up:

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script>
window.onload = function() {

    $('body').html('before print');

    console.log('before print');

    window.print();
};
</script>

When you look at the print preview, the page will have the text "before print" on it. For some reason, the console will log the text only when the print panel closes, but in my opinion that doesn't really matter for your visitors. You can manipulate DOM and change the page before the printing process as you like.

Answer 4

Safari prints the page before it is loaded unlike other browsers. Hence window.onload() can be used in the code of the newly opened html page. But if the page opened is non html content, then it is not possible. The below solution is global across browsers and type of content open.

var printWindow = window.open(url, '_blank');
$(printWindow).load(function()
{
    this.print();
});

Answer 5

Adding one more solution which worked for my case:

First make your popup window.

$( ".myButton" ).click(function() {
    var url = 'www.google.com';
    var printWindow = window.open( url, '_blank');  
    printWindow.focus();
});

Then, inside the HTML page which is loaded in the popup:

$(window).bind("load", function() {

    setTimeout( function () { 

      try {
        document.execCommand('print', false, null);
      }
      catch(e) {
        window.print();
      }

    }, 500);

});