How Hard Can It Be: Use JavaScript to Close Web Browser Window After Print

May 9, 2024 #HowHardCanItBe #JavaScript #WebBrowser

So here is a simple JavaScript task I had to tackle for Toph:

When a user clicks the Print button, open a new tab/window and activate the print dialog. Close the window when the user confirms the print or cancels the dialog.

Attempt 1: Call `window.close()` Immediately After `window.print()`

I used the onclick attribute on the Print button to open the page to be printed on a new tab/window.

1
<a href="javascript:;" onclick="window.open(...)">Print</a>

And on that other page I tucked away a <script> element right before closing the <body>:

1
2
3
4
<script type="text/javascript">
    window.print()
    window.close()
</script>

Did that work? It did on Firefox.

On Google Chrome, the Internet Explorer of the current century? It closed the window as soon as it opened.

Apparently, window.print() on Firefox is blocking, but not on Google Chrome and its progeny.

Attempt 2: Use Event ‘afterprint’

Surely I was not using the standard way of doing things, so attempt 1 only tells you how little I know about front-end JavaScript.

I changed the JavaScript to this:

1
2
3
4
5
6
<script type="text/javascript">
    window.addEventListener("afterprint", function(event) {
        window.close()
    })
    window.print()
</script>

Now it works on Google Chrome.

But guess what? Not on Firefox. However, at least this time it broke in a way not as frustrating as Google Chrome.

On Firefox, the event “afterprint” is triggered at a time when window.close() fails to close the window.

Attempt 3: `setTimeout(..., 0)`

I don’t know why I tried this. It is like my brain is used to this idea that if something doesn’t work in JavaScript, you probably need to just run it on the next tick.

1
2
3
4
5
6
<script type="text/javascript">
    window.addEventListener("afterprint", function(event) {
        setTimeout(function() { window.close() }, 0)
    })
    window.print()
</script>

And yes, doing this did the trick. It now works on Google Chrome and the other web browser funded by Google.

Any other important web browser I am missing?

comments powered by Disqus

Attempt 1: Call window.close() Immediately After window.print()

Attempt 2: Use Event ‘afterprint’

Attempt 3: setTimeout(..., 0)

Attempt 1: Call `window.close()` Immediately After `window.print()`

Attempt 3: `setTimeout(..., 0)`