Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth.

The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/

Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way.

Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided?

P.S.: On my real site the same occurs with Chrome. In the example fiddle Chrome seems to not show the same behaviour as Safari, though.

Edit: I also tried to have the printing button on a different tag than an a anchor, like span or button, but that didn't help with the problem.

Edit: I run into this problem with Safari 5.1.2 on Mac OS 10.6.8. In the jsfiddle example, the behavior shows as a white "flicker" that covers the whole browser after having clicked the print button and closing (either printing or aborting) the print dialogue.

Edit: Just started a bounty for this question, as I am still looking for an explanation for this browser behaviour. I am more than willing to give more details on the issue. From my experience on SO it is not adviseable to post links to online pages, however I feel the problem is really hard to reproduce. I think the "flicker & re-render" I experience with the posted jsfiddle is hopefully is result of the same problem.

Edit: As explained in the comments, opening a new window containing the current state of the application, then printing and closing that window, might be a fix, but I don't consider it a sufficient answer to the problem at hand.

like image 897
kontur Avatar asked Feb 13 '12 13:02

kontur


People also ask

Is not working in JS?

Open your page in a browser, then open the developer tools. In Chrome on Windows, it's ctrl+shift+i . If you are including an external JavaScript file, check for 404 errors in case the path to your file is incorrect. Check for any JavaScript errors that appear in the console.

How do I refresh JavaScript in Safari?

It's just command⌘ + R nowadays (Safari 14). The trick being to open the Web Inspector (option⌥ + command⌘ + I) before triggering a refresh.


1 Answers

If you can't figure a way to fix the problem you might get a quick fix this way: var win=window.open() the same page you are on then win.print() it, then win.close(). Hope this helps.

like image 66
Bogdan.Nourescu Avatar answered Sep 24 '22 13:09

Bogdan.Nourescu