Window.close

JavaScript
1

I have a popup window. When a user click ‘x’ on the upper righthand corner to close the window, I want to display and message with yes or no option. Would you let me know how I can do this?

Thanks,

Beginner

2

You can’t do it.

  1. There is no yes/no dialog available to JavaScript - only OK/Cancel

  2. By the time the onunload event is triggered the page is already unloading so nothing selected after that will make any difference.

  3. Some browsers have a proprietary onbeforeunload event handler that can interrupt things at that point but there is still no way to distinguish why the current page is being unloaded - refreshing the page, loading a different page, or closing the tab would also trigger the event, not just closing the browser.

3

Hi beginner12, welcome to the forums

Do you really want to do this?

4

Hi, welcome to sitepoint! :slight_smile:

There is an onbeforeunload event on the window object where you can add a message to be displayed and have confirmation before the window is closed.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function beforeClose()
{
  return "Mssage...";
}
window.onbeforeunload=beforeClose;
</script>
</head>
<body>
</body>
</html>
5

Whilst the browser support isn’t 100% I find it can be very useful - e.g. How GMail warns you if you’re going to lose an unsaved draft.

  1. By the time the onunload event is triggered the page is already unloading so nothing selected after that will make any difference

That’s not true. Hitting cancel prevents the window from closing.

6

I fully agree. Thank you Google for showing us how these features can be successfully used “not for evil”.

7

Ahh, sorry you were writing about onunload which is correct.

8

Thank you for the example. It worked for me.

Does this work only for internet explorer?

Thanks

9

There are one or two other browsers that implement it as well.

Of course since onbeforeunload is often used to interrupt people leaving a page with the display of an ad there is a lot of incentive for people to turn that event handler off if they are using a browser that does support it.

There are plenty of browsers that don’t support it too since it is a non-standard event and so you can’t rely on it for anything.

The most useful use for the onbeforeunload event handler is with IE to test if the browser is allowed to close the window so as to not try if it can’t. That gets rid of the dialog that IE pops up when the page can’t close the window and makes it consistent with the behaviour of all other browsers.

10

Even for browsers that do support onbeforeunload, as mentioned, that event can be triggered in more than one way. One thing that would work in all browsers is to put in your own “close this window” button or link and have that give the “you will lose entered form data” alert. Or you could make it easy and just put that statement somewhere visble on the page instead of using an annoying alert that may turn off visitors.

If someone wants to leave, it probably isn’t an accident, and such tactics will PO many.

11

Those responses are particularly annoying when all you want to do is to relead the current page.

There is no way to tell what the person is trying to do that triggerd the event - just that it is something that requires unloading the current page.

12

Hi,

I didn’t want to display the message if the user did not keyed in any data. So I added codes shown below to go through all the fields to check whether the user keyed in any data or not. But the logic is not working. Any help would be appreciated.

Thanks

<script type=“text/javascript”>

var valuesEntererd = false;

function beforeClose(form)
{
var elements = document.getElementsByTagName(‘*’);
for (var i = 0, len = elements.length; i < len; i++){
if ((elements[i].tagName == ‘INPUT’ && elements[i].type && elements[i].type == ‘text’) || elements[i].tagName == ‘textarea’){
if(elements[i].value != ‘’){
valuesEntererd = true;
break;
}
}else if (elements[i].tagName == ‘SELECT’ ){
if (elements[i].selectedIndex != 0){
valuesEntererd = true;
break;
}
}
}

if (valuesEntered == true){
	return "All information entered will be lost.";
}

}

window.onbeforeunload=beforeClose(this);

</script>

13

Is there a way to change default message I am getting ‘Are you sure you want to navigate away from this page?’ and then ‘Press OK to continue, or Cancel to stay on the Current page.’ Can I only display ‘my message’ in between this two messages?

Thanks

14

You only get that message in Internet Explorer. It means that your site didn’t open the window and therefore your site isn’t supposed to be allowed to close the window. The only way you can change the behaviour is to test for if the window is allowed to be closed first. Then you could change it to work the same as all other browsers by not running the window.close() if it isn’t allowed.

15

I tried Firefox and it was giving me the same message.

I do not quite understand rest of your message.

Thanks

16

For the couple of browsers that understand the proprietary beforeunload that is the message they display. Since that is a non-standard event most browsers just ignore it.