window.close() and different browser implementations – it’s complicated… (#note)

You can open new browser tabs or windows using the JavaScript method window.open.

To see how it works, have a look at the button below:

<button type="button" onclick="window.open('/popular-posts/')">
  Open popular posts
</button>

Pretty nifty, right?

As you saw, opening new tabs/windows with JavaScript is a single method call. And when it comes to closing a tab/window, there's the method window.close, too.

Interestingly, using this method is more complicated, and it's not always closing the current browsing context. The reason for that is that you don't want random third-party scripts closing your open window. There have to be rules about it!

The HTML spec defines conditions when a script is allowed to close a tab/window via window.close:

A browsing context is script-closable if it is an auxiliary browsing context that was created by a script (as opposed to by an action of the user), or if it is a top-level browsing context whose session history contains only one Document.

That's great, and now we're entering the grey zone of browser interpretations. It turns out that the browsers out there implemented the specification-based closing functionality in different ways.

And that's where I hand over to Eric Lawrence. Eric wrote a fascinating article about the different window.close implementations.

It's a great and fascinating read the multiple available browsers; thank you, Eric!