Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript window.print() in chrome, closing new window or tab instead of cancelling print leaves javascript blocked in parent window

In the application I work on, we have several different places a user can print from. In all these cases we are using the same workflow of opening a new window(or tab), writing whatever we need to print to the document of the new window, and then we call

    $(w.document).ready(function () {         w.focus();         w.print();         w.close();     });   

The issue I'm seeing is that in Chrome, if I close the tab or window that is opened for the print preview instead of clicking the cancel button, Chrome is still blocking the javascript on my parent window.

It is similar to the issue described here:

Google Chrome blocks ajax requests when print preview is opened on child window

We are experiencing this issue as well, but I believe this is a result of how we are implementing printing in a new window and the way Chrome's print preview works. In IE and Firefox, the print window displays the modal dialog, and you are not able to do anything in the parent window until the print window is closed. Similarly chrome is blocking use of the parent window until the print preview is cancelled. However I would expect closing that tab or window to work the same as cancelling the print.
Has anyone else had this issue or know of a good solution?

Thank you!

like image 667
umitelight Avatar asked Apr 14 '14 22:04

umitelight


People also ask

What does Window print () do in Javascript?

print() Opens the print dialog to print the current document. If the document is still loading when this function is called, then the document will finish loading before opening the print dialog.

How do I print a pop up window in Chrome?

Chosen Solution You can use the keyboard shortcut Ctrl+P to open the print dialog. You can use the keyboard shortcut Ctrl+P to open the print dialog. The Print button is in the Customize Panel.

How do I get my browser to print automatically?

To enable auto-printing: Step 1: Right-click on the Google Chrome icon from your POS machine Desktop. Step 2: Click Properties. Step 3: From the Target box, after \chrome.exe", add "(space)--kiosk-printing" and click Apply.


2 Answers

It looks like the problem had been resolved with the latest Chrome update... I'm running the Chrome Version 36.0.1964.4 dev-m.

I was limited too warning the user from closing print preview window by doing the following:

if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1){   // Chrome Browser Detected?     window.PPClose = false;                                     // Clear Close Flag     window.onbeforeunload = function(){                         // Before Window Close Event         if(window.PPClose === false){                           // Close not OK?             return 'Leaving this page will block the parent window!\nPlease select "Stay on this Page option" and use the\nCancel button instead to close the Print Preview Window.\n';         }     }                        window.print();                                             // Print preview     window.PPClose = true;                                      // Set Close Flag to OK. } 

Now the warning is no longer coming up after the Chrome update.

like image 163
Paul VB Avatar answered Sep 19 '22 15:09

Paul VB


The problem is that there is an in-browser print dialogue within the popup window. If you call window.close() immediately then the dialogue is not seen by the user. The user needs to click "Print" within the dialogue. This is not the same as on other browsers where the print dialogue is part of the OS, and blocks the window.close() until dismissed - on Chrome, it's part of Chrome, not the OS.

This is the code I used, in a little popup window that is created by the parent window:

var is_chrome = function () { return Boolean(window.chrome); } window.onload = function() {     if(is_chrome){         /*          * These 2 lines are here because as usual, for other browsers,          * the window is a tiny 100x100 box that the user will barely see.          * On Chrome, it needs to be big enough for the dialogue to be read          * (NB, it also includes a page preview).         */         window.moveTo(0,0);         window.resizeTo(640, 480);          // This line causes the print dialogue to appear, as usual:         window.print();          /*          * This setTimeout isn't fired until after .print() has finished          * or the dialogue is closed/cancelled.          * It doesn't need to be a big pause, 500ms seems OK.         */         setTimeout(function(){             window.close();         }, 500);     } else {         // For other browsers we can do things more briefly:         window.print();         window.close();     } } 
like image 27
Coder Avatar answered Sep 19 '22 15:09

Coder