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

Solution 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);
};

Solution 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();
}

Solution 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.

Comments

[YuC]

Yes @Stephan, there is no necessary to add console.log, but i really need add DOM manipulation code before window.print(), and on my Safari, the window.print(); always execute before JS code prior to it, the same thing happens even if i replace window.print() instead of setTimeout(window.print(),5000).

[Stephan Wagner]

Well, thats my whole point, the DOM gets manipulated before window.print(). Try my example in safari, when you look at the print preview, you will see that there is text on the page

[YuC]

No, in my real code, i do manipulates DOM before window.print(), and it doesn't work, that's why i am asking this question. You can see my updates on the question, i tried to change an element's text color before window.print();, but the color didn't change before i click the cancel button on print panel.

[Stephan Wagner]

I just did another test where I changed the text color and background-color and it did work fine. It does not show on the page until you cancel the print dialog, but when I printed the page it did have the changed color, even without setTimeout, so I'm not sure why it won't work with your code

[YuC]

Well, maybe it's just an issue happens on Windows Safari.

[Jason]

The issue is that browsers halt javascript execution when print is initialized. Safari may be initializing the print before the console.log executes, meaning it delays the log.