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

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


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.


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


If the setTimeout function does not work for you either, then do the following:

//Create an iframeiframe = $('body').append($('<iframe id="documentToPrint" name="documentToPrint" src="about:blank"/>'));iframeElement = $('#documentToPrint')[0].contentWindow.document;//Open the iframeiframeElement.open();//Write your content to the iframeiframeElement.write($("yourContentId").html());//This is the important bit.//Wait for the iframe window to load, then print it.$('#documentToPrint')[0].contentWindow.onload = function () {    $('#print-document')[0].contentWindow.print();    $('#print-document').remove();};iframeElement.close();