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

Question

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!

Could you use this solution http://stackoverflow.com/questions/805463/javascript-to-check-when-the-browser-window-is-close to detect when the user closes the window and if so, fire your w.close event? — ReLeaf, Apr 15 '14 at 02:04
@ReLeaf Thanks for the response. I added the suggested binding, `$(w).bind("beforeunload", function () { w.close(); });` This does get fired when I close the print tab/window, but w.close() does not "cancel" the print preview. Chrome is still blocking any actions in the javascript of my parent window. In the print preview, there's an option to use the system dialog, and if close that dialog, it does cancel the print and my parent window returns to normal. I either need to programmatically use the system dialog or "cancel" printing. I have not been able to find a solution to either. — umitelight, Apr 15 '14 at 14:31
That's a bummer. I'll look around for a way to fire the cancel button and see what I can come up with. Update back here if you find a solution. — ReLeaf, Apr 15 '14 at 20:35
I am watching this question; I hope someone comes up with an answer. I have submitted an issue to Google, but if someone can come up with a workaround until it's fixed it would be great. Here is a relevant fiddle: http://jsfiddle.net/6yd25/show/ — Malk, Apr 16 '14 at 16:59
I'm on a Mac (Mavericks), using Chrome 34.0.1847.116, and this bug doesn't seem to be present. Your fiddle demo works for me. — John Sanders, Apr 17 '14 at 16:57
I concur with John. I am using Chrom 34 on Windows 8 and cannot reproduce the issue, neither can I find related bug in Chrome's bug database. — Sheepy, Apr 25 '14 at 03:30
I can confirm that the issue remains in Chrome 34 on Windows 7, I've got the same setup as described in the question. — Henrik Janbell, Apr 29 '14 at 12:11
I haven't yet been able to verify it working on windows 8, but I did verify that it does work for a Mac, however it looks like the Mac print preview window is different from the one in windows 7 because you can see the 'Print'/'Cancel' buttons are switched. So maybe they have it fixed in some instances of the print preview window, but have yet to update it for windows 7. Hopefully it is resolved soon, as most of the users of our application use windows 7 or earlier and this is a potential workflow that crashes our application. — umitelight, Apr 29 '14 at 14:29
I can confirm this on Chrome 34 on Windows 8, I've tried Canary build v36, and it works fine. For the moment being, I've added a check for version less than 36, just add a onbeforeunload that warns the user. — jValdron, May 01 '14 at 16:01
Did anyone find a solution for this? I find it hard to believe that we would have to wait for a chrome update to resolve the issue. I'm sure there's something that can be done programatically...right? — Brams, May 09 '14 at 13:03

score 20 · Accepted Answer · answered May 01 '14 at 02:13

20

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.

answered May 01 '14 at 02:13

Paul VB

324
1
3

Thanks for the update on chrome v36, I checked that out and did confirm this issue is fixed in that version, so it appears the best we can do for now is a warning like you suggested. – umitelight May 12 '14 at 18:52
We can't force our end users to update to the v36 Beta version of Chrome. Thank you for the JS code. This worked perfectly! – jgerman Jun 30 '14 at 17:14
Chrome 36.0.1985.125 has now been promoted into the stable channel – Stijnvdk Jul 17 '14 at 07:36
3

On version 78 and the print dialog is still blocking – Goddard Nov 09 '19 at 21:54
On Chrome Version 90.0.4430.85 and the print dialog is still blocking – Jacob Weisenburger Apr 23 '21 at 19:17
I think it problem just came back on Version 90.0.4430.85! We are scrambling to get a fix as it's killing our application when the user used the close button. – Jerod Houghtelling Apr 23 '21 at 21:03
@JerodHoughtelling, yes mine too, did you fixed that? – Novice Apr 26 '21 at 10:14
@Beginner I have posted my answer as it was too long to share in a comment. https://stackoverflow.com/a/67283771/373521 – Jerod Houghtelling Apr 27 '21 at 13:14

score 10 · Answer 2 · answered Feb 02 '16 at 20:21

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

Jerod Houghtelling · Answer 3 · 2021-04-27T13:22:18.453

In order to work around this problem, I had to switch the printing process from a new window to a hidden iframe. The iframe remains in the DOM and is reused for additional printing (receipts in our case).

Inspired by Daybreaks's answer https://stackoverflow.com/a/39099832/373521

function printHtml(html) {
    try {
        var iframe = document.getElementById("printingFrame");
        if (!iframe) {
            iframe = document.createElement('iframe');
            iframe.id = "printingFrame";
            iframe.name = "printingFrame";
            iframe.width = '0';
            iframe.height = '0';
            iframe.style = 'position: absolute;top: 0;left: 0;width: 0;height: 0;';
            document.body.appendChild(iframe);
        }

        iframe.contentWindow.document.open();
        iframe.contentWindow.document.write('<!DOCTYPE html');
        iframe.contentWindow.document.write('<html><head>');
        iframe.contentWindow.document.write(
            '<style type="text/css">' +
            'body{font-family:Verdana, Arial;font-size:12px;}' +
            '@media all {.page-break { display: none; }}' +
            '@media print {.page-break { display: block; page-break-before: always; }}' +
            '</style>');
        iframe.contentWindow.document.write('</head><body>');
        iframe.contentWindow.document.write(html);
        iframe.contentWindow.document.write('</body></html>');
        iframe.contentWindow.document.close();

        window.frames["printingFrame"].focus();
        window.frames["printingFrame"].print();
    } catch (ex) {
        console.error("Error printing: " + ex.message);
    }
}

score 2 · Answer 4 · answered Aug 23 '16 at 11:24

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

//Create an iframe
iframe = $('body').append($('<iframe id="documentToPrint" name="documentToPrint" src="about:blank"/>'));
iframeElement = $('#documentToPrint')[0].contentWindow.document;

//Open the iframe
iframeElement.open();

//Write your content to the iframe
iframeElement.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();

score 1 · Answer 5 · answered May 20 '14 at 20:22

For those of you who are popping up a new window to print from, and then automatically closing it after the user clicks "Print" or "Cancel" on the Chrome print preview, I used the following (thanks to the help from PaulVB's answer):

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    var showPopup = false;
    window.onbeforeunload = function () {
        if (showPopup) {
            return 'You must use the Cancel button to close the Print Preview window.\n';
        } else {
            showPopup = true;
        }
    }
    window.print();
    window.close();
} else {
    window.print();
    window.close();
}

I am debating if it would be a good idea to also filter by the version of Chrome...

I open a new window with some text and have a print button. It works fine in Chrome but not in IE10 :/ — SearchForKnowledge, Feb 17 '15 at 15:51

Ahmed Gadir · Answer 6 · 2021-01-31T13:01:53.730

OK here is what worked for me! I have a button on my left Nav. If you click it it will open a window and that window will load a document. After loading the document I want print the document then close the popup window immediately.

contentDiv.focus();
contentDiv.contentWindow.print();
contentDiv.contentWindow.onfocus = function() {
    window.close();
};

Why does this work?
Well, after printing you set the onfocus event to close the window. The print popup will load so quickly that the onfocus event will not get a chance to trigger until you 1)print 2) cancel the print. Once you regain focus on the window, the window will close!
I hope that will work for you

score 1 · Answer 7 · answered Nov 23 '18 at 11:36

Run this code It will open google print service popup.

function openPrint(x) {

   if (x > 0) { 
       openPrint(--x); print(x); openPrint(--x);
   }

}

Try it on console where x is integer .

openPrint(1);   // Will open Chrome Print Popup Once
openPrint(2);   // Will open Chrome Print Popup Twice after 1st close and so on

Thanks

score 0 · Answer 8 · answered Apr 21 '14 at 14:19

Chrome print is usually an extension page so there is no dom attachment happening in your existing page. You can trigger the print command using command line apis(window.print()) but then they have not provided apis for closing it becoz of vary reason like choosing print options, print machine,count etc.

score 0 · Answer 9 · edited Apr 23 '16 at 17:18

I can confirm that I have the same bug on Windows 7 using Chrome Version 35 but I share my partial solution who is open a new tab on Chrome and showing a dialog.

For other browser when the user click on cancel automatically close the new print window.

//Chrome's versions > 34 is some bug who stop all javascript when is show a prints preview
//http://stackoverflow.com/questions/23071291/javascript-window-print-in-chrome-closing-new-window-or-tab-instead-of-cancel
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    var popupWin = window.open();
    popupWin.window.focus();
    popupWin.document.write('<!DOCTYPE html><html><head>' +
        '<link rel="stylesheet" type="text/css" href="style.css" />' +
        '</head><body onload="window.print()"><div class="reward-body">' + printContents + '</div></html>');
    popupWin.onbeforeunload = function (event) {
        return 'Please use the cancel button on the left side of the print preview to close this window.\n';
    };
}else {
    var popupWin = window.open('', '_blank', 'width=600,height=600,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
    popupWin.document.write('<!DOCTYPE html><html><head>' +
        '<link rel="stylesheet" type="text/css" href="style.css" />' +
        '</head><body onload="window.print()"><div class="reward-body">' + printContents + '</div>' +
        '<script>setTimeout(function(){ window.parent.focus(); window.close() }, 100)</script></html>');
}
popupWin.document.close();

score 0 · Answer 10 · edited Apr 23 '16 at 17:17

0

Use this code to return and reload the current window:

function printpost() {
  if (window.print()) {
    return false;
  } else {
    location.reload();
  }
}

edited Apr 23 '16 at 17:17

Laurel

5,965
14
31
57

answered Dec 24 '14 at 11:19

Karthikeyan Ganesan

1,901
20
23

score -1 · Answer 11 · answered Apr 29 '14 at 15:15

i've mandained some similar page (classic asp...)

my approach was to use Q promise directly on the popup.

For example my problem was that the popup i wanted to print close itself too fast ... and the print previw was empty, i solved this way :

Caller :

var popup = window.open("index.asp","popupwindow","width=800,height=500,left=200,top=5,scrollbars,toolbar=0,resizable");

Popup (at the end of the page):

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/q.min.js"></script>
<script type="text/javascript">
    Q(window.print()).then(function () {window.close();});
</script>

I think that your "parent lock" could be solved in a similar way

i would try :

var w = whatever;
Q(
  // fill your popup
).then(function () {
 w.print();
}).then(function () {
 w.close();
});

that makes "the print" and "the close" async... so the parent will be immediately "unlocked"

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

11 Answers11

Linked