Closing a tab with javascript after printing from a web page

Question

I know that you can open a new tab in javascript and subsequently close it if you keep a reference to it as per this SO question.

In my case, I want to open a new tab, which contains a script that automatically triggers the browser's print dialog. Once the print dialog is dismissed, I want the new tab to go away. Since the scripts in the new page were not what created that page, they don't have the ability to close it.

Is there a way to detect when the print dialog is dismissed so that the script that created the new tab knows when to close it?

Example of what I'm trying to accomplish:

var printTab;
$('#print_me').on('click', null, function() {
    printTab = window.open($('#print_me').data('target'), "_blank");
    printTab.focus();
});

function closePrintTab() {
    printTab.close();
}

/* Here is the sketchy part; what triggers a call to closePrintTab? */

This might help you: http://stackoverflow.com/questions/6460630/close-window-automatically-after-printing-dialog-closes — nikoskip, Apr 16 '16 at 05:07
@nikoskip: I have tried several of those approaches. The problem I'm running into with them is that modern browsers now only allow a script to close a window if that script was what opened the window in the first place. The last solution from the answer there is something of a hack and isn't a good long-term solution when you consider that browsers seem to be actively trying to prevent that sort of thing. — Adam, Apr 16 '16 at 05:10
Maybe you can use cookies to exchange data between tabs/windows and know when to close the window: http://stackoverflow.com/questions/4079280/javascript-communication-between-browser-tabs-windows — nikoskip, Apr 16 '16 at 05:14
@nikoskip Good suggestion; found this, which I'll try out tomorrow to see if I can get it working for this use case: http://stackoverflow.com/questions/22205811/how-send-signals-trigger-events-through-all-browser-tabs-using-js-or-jquery-js — Adam, Apr 16 '16 at 05:25
Good luck! And as your link says, `localStorage` is a better approach, I think. — nikoskip, Apr 16 '16 at 05:28

score 0 · Accepted Answer · answered Apr 16 '16 at 05:29

In my case, I want to open a new tab, which contains a script that automatically triggers the browser's print dialog. Once the print dialog is dismissed, I want the new tab to go away. Since the scripts in the new page were not what created that page, they don't have the ability to close it.

So from what I can understand is that you have a script in the new tab which triggers a dialog and once this dialog is dismissed you want to close that tab.

assuming you have control over the dialog dismissed event you can close this window using window.close(); in dialog dismissed event handler which is written within this newly opened tab.

And commenting on this statement

Since the scripts in the new page were not what created that page, they don't have the ability to close it.

yes you are right, But you can close the current tab from the scripts within this current tab. And that's when window.close(); is used. which closes the current window.

Hope this is helpful.

I've attempted to use `window.close()` from a script in the page that was loaded in the new tab and Chrome gave me this warning: "Scripts may close only the windows that were opened by it." If one wishes to close the new tab (at least in Chrome), it has to be done from the same script that opened that tab. — Adam, Apr 16 '16 at 16:01

score 0 · Answer 2 · edited May 23 '17 at 10:33

My solution in this case is to use the HTML5 localStorage facility. On the page with the print button:

localStorage.removeItem('printFinished');
var printWindow = window.open('/path/to/print/', "_blank");
window.addEventListener('storage', function(event) {
    if(event.key == "printFinished") {
        printTab.close();
    }
}, false);

The important points here are that localStorage persists indefinitely. Clearing the target variable each time ensures that we aren't interacting with anything from previous sessions. Next, we need to make sure we're reacting only to changes on our item of interest.

... And for the code in the new tab that is opened when the print button is clicked:

window.onLoad = function() {
    window.print();
    localStorage.setItem('printFinished', true);
}

I tested the above in both Chrome and FireFox without any issues. I cannot vouch for IE/Edge, Safari, or Opera though and am very interested in the results others might get in these browsers.

The above will not work if you use sessionStorage instead as per the answer on this SO question.

score 0 · Answer 3 · answered Apr 17 '16 at 04:50

0

You can try something like this:

function closeThisWindow() {
         var win = window.open('', '_self');
         window.close(); // works for i.e.
         win.close(); //works for chrome
         return false;
}

answered Apr 17 '16 at 04:50

Pritam Banerjee

17,953
10
93
108

score 0 · Answer 4 · answered May 16 '20 at 09:22

It's very hard to open new tab, then watch print event on new tab. I recommend you to use open new window and then watch it's print event, then auto close that window after print. Example:

//.ts

const windowUrl = 'about:blank';
const uniqueName = new Date();
const windowName = 'CloseTillPrint' + uniqueName.getTime();
const PrintWindow = window.open(windowUrl, windowName, 'z-index:999;position:absolute;left:50%;transform: translateX(-50%); top:0; bottom:0; height:100%; width:1000px');

if (PrintWindow) {
      const iframe = this.createIframe(pdfAsString, false);
      PrintWindow.document.open('text/plain');
      PrintWindow.document.write(iframe.outerHTML);
      // PrintWindow.document.write('Hello World');
      PrintWindow.document.close();
      const targetFrame = PrintWindow.frames[iframe.name];
      targetFrame.focus();
      targetFrame.print();
      setTimeout(() => {
        PrintWindow.focus();
      }, 1000);
      PrintWindow.onfocus = () => {
        console.log('print window focused');
        targetFrame.close(); PrintWindow.close();
      };
    }

Closing a tab with javascript after printing from a web page

4 Answers4