How do I programmatically detect how a browser handles window.close()?

Question

Different web browsers handle the window.close() function differently. IE prompts the user for confirmation, while Firefox and Safari just fail to honor it unless the window was originally opened with Javascript and display a message saying as much in the console.

A third party web application used internally in our organization that I support displays a 'close' button at the end of a wizard-like series of pages. This works well for IE, which is what the majority of our users use. However, this obviously fails in FF. I'd prefer to leave the button in and use Javascript to gracefully degrade the UI by not displaying that button in any browser that will not perform the window.close().

As a rule of thumb, I try to check browser capability rather than relying on a hard-coded policy based on browser detection whenever possible. Is there a way to programmatically check the support for window.close() so I can determine whether the button should be displayed in the first place?

Boisleduc

I don't think it's possible. You're probably best off checking which browser is being used - if it's IE, you can assume that window.close() will work. If it's anything else, then assume it will not work. – Parthia

Until IE follows other browsers and doesn't work as expected. Better to write to the developers of the web application and get them to fix it. – Upbow

Answer 1

Try this:

Demo: http://jsfiddle.net/ThinkingStiff/mnv87/

Script:

function hasClose() {

    var close = window.open( '', '', 'height=100,width=100,left=3500', false );
    close.close();
    return close.closed;

};

if( hasClose() ) {
    //show button
} else {
    //hide button
};

Note hasClose() will also return false if popups are blocked.

Hubble

Unfortunately this might leave an orphaned window, so it's still a catch-22. – Umberto

@pst Yeah, you're right. Maybe you could make it the splash screen or something useful. – Hubble

Yeah, I was thinking about a "configuration" screen :) – Umberto

Answer 2

Why not check compatibility, and then append if compatible? Using jQuery:

<script type="text/javascript" src="latest_jquery_file.js"></script>
<script type="text/javascript">
  $(document).on("ready", (function(e)
  {
   $("body").append('<p><a href="#" id="windowcloser">Close The Window!!</a></p>');
      $('#windowcloser').click(function(){
         window.close();
      });
  })
  );
</script>

Since jQuery is cross browser compatible, it should

Trail

...but the question is how you can check compatibility. – Abandon

Answer 3

Very simple. Your script should try (or try) to window.close, and if its still alive after that try - show the message, and, optionally, erase/replace page content, or use location.reload to not give your users any reason to stay at the page anymore.

p.s.: keep in mind, closing windows from JavaScript is very impolite. So you better have some good reasons for doing it ;)

Downdraft

I had considered detecting whether the window was closed after the button click, but I'd prefer to not display the button in the first place. Incidently, using try/catch doesn't seem to help in this case as both IE and FF don't throw an exception with window.close(). – Boisleduc

As far as being impolite, while it may be true in general, there are exceptions (similar to the feature detection vs. browser detection approach). It's all about context and managing expectations. In this case the web app is used infrequently to perform a single task. It's also available in a locked down "kiosk mode" from a Windows login screen. Closing the browser returns to the login screen. As suggested by Fitts's Law, having a big "Close Window" button centered on screen below the content can be more intuitive than the kiosk browser's small X in the upper right corner. – Boisleduc