Greg Tyler

Portfolio Twitter GitHub

When is a window closable?

JavaScript has a function window.close() which, under certain circumstances, will close the current window. However sometimes you'll run into an error like:

Scripts may close only the windows that were opened by it.

In this situation, your helpful "close this window" buttons don't work.

We have exactly this in situation in a current project I work on, where we ask people to open a link in a new tab so that window.close() will take them back out of it.

The problem we had was knowing when window.close() will work. If you open a new window with JavaScript (using window.open() no less) then it you're fine. But if you right click and open in a new tab, then submit a form, it won't be happy. So when is a window closable?

My first thought was the opener property of window which presumably would hint at where the window came from and - hence - what can close it. So I made a table of various difference situations which I experimented with in each of the major desktop browsers (Chrome, Firefox, IE). Find the table below and some terminology explained beneath it.

Chrome 39 Firefox 31 Internet Explorer 11 *
Click New tab Click New tab Click New tab
Child N N N N U U
Child (_blank) W W W N W U
Child (JS) W W W
Through form N N N N U U
Through form (_blank) W W W N W U
Through form (JS) W W W
Through link N N N N U U
Through link (_blank) W W W N W U
Through link (JS) W W W

Notes:
"Child" means that the user was taken straight to a page with a close button on it. "Through form" means they were taken to a page which had a form submission before the close page. "Through link" means that they were taken to a page with a link to the close page.

"(_blank)" means that the window was opened using an <a> tag with the target="_blank" attribute. "(JS)" means that the window was opened with the window.open function. All other examples were <a> tags with no attributes.

The colour of each cell is whether or not it could successfully be closed. The text denotes the value of window.opener. Where the text is "N", this value was null, where it is "W" it returned a window object. Where it is "U", it returned undefined.

  • Internet Explorer always prompts you to confirm the window closure.

What have we learnt?

Firstly, Internet Explorer is noticeably unusual. It returns undefined rather than null and then lets you close the window no matter what situation you're in (though with a prompt). Secondly, and important for my situation, asking people to open a new tab doesn't mean we'll be able to close it. As soon as they follow a link or submit a form, both Firefox and Internet Explorer lose control.

In a goal to find some sort of check whether a window is closable, I can recommend the following from my results:

if( typeof window.opener === 'object' && window.opener instanceof Window ) {
    // We can certainly use window.close
} else {
    // We can't be sure window.close will work
}

This is (from the experience above) a cross-browser way to be certain that window.close will work, without any browser sniffing.

Are my figures right? Any views on this? Comment below!

Any questions? Comments? Other feedback? Contact me on Twitter.