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

User · Answer

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

User · Answer

If the setTimeout function does not work for you either  then do the following     Create an iframe iframe      body   append     lt iframe id  documentToPrint  name  documentToPrint  src  about blank   gt      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

User · Answer

Use this code to return and reload the current window   function printpost       if  window print          return false      else       location reload

User · Answer

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    gt  -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

User · Answer

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

User · Answer

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      lt script src   Scripts jquery-1 9 1 min js  gt  lt  script gt   lt script src   Scripts q min js  gt  lt  script gt   lt script type  text javascript  gt      Q window print    then function     window close        lt  script gt    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

User · Answer

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

User · Answer

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    gt  -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

User · Answer

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

User · Answer

Run this code It will open google print service popup   function openPrint x        if  x  gt  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

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

Examples related to javascript

Examples related to google-chrome

Examples related to printing

Examples related to new-window