Using the OnBeforeUnload JavaScript Event

[Frinavale]

Introduction
I've seen many questions asked about how to disable the browser's back button and in the past I've replied with "it's simply not possible". It's not a good idea to disable the back button anyways, if the user ventures away from your page then they wouldn't have this button at their disposal.

The main reason people ask how to control or disable the back button is because they have a need to control sensitive (and/or) dynamic web content. For example, they may be trying to ensure that once a user is logged out hitting the browser's back button wont display any sensitive data; or maybe they are trying to make sure that the user's work is not lost when the user hit's the back button.

Please note that, at this time, the Opera web browser does not support the OnBeforeUnload event

The window.onbeforeunload() Event

The JavaScript window.onbeforeload() event is fired just before the web page is unloaded. This gives us the ability to make sure that the user is certain about leaving the page that they are viewing.

The unique thing about this event is that if function that handles it returns anything ("true","false","null"...a string...anything) a confirm prompt window will be displayed by the browser stating:

Are you sure you want to navigate away from this page?
Press Ok to continue or Cancel to remain on the current page.

So, for example, if you wanted to just display a confirm box asking the user if they really want to leave your page you would add:

<script type="text/javascript">
     window.onbeforeunload = function(){ return;}
</script>
 

If you return a string from the function handling the onbeforeload event, then it will be inserted into the prompt as such:

Are you sure you want to navigate away from this page?
Your Returned String Goes Here
Press Ok to continue or Cancel to remain on the current page.

In this case you would have the javascript:

<script type="text/javascript">
     window.onbeforeunload = function(){ return 'Your Returned String Goes Here';}
</script>

If the user clicks the Cancel button, the unload event is not executed and they remain on the page, otherwise they are permitted to leave and their cache is cleared.

To prevent the confirm box from appearing simply do not add a "return" to your function.
Eg.

<script type="text/javascript">
     window.onbeforeunload = function(){}
</script>
 

Please remember that the window.onbeforeunload event is fired every time the page is about to unload. This means that if the user clicks a button on your page, and your page posts back to the server, the window.onbeforeunload event will fire. Please take this into consideration when developing the function that handles the window.onbeforeunload event.

Conclusion

The window.onbeforeunload event is a great way to ensure that the user is certain about the consequences of leaving your web page.

An important thing to remember is that if the JavaScript function handling the onbeforeunload event returns anything at all a confirm box is displayed automatically no matter what is returned. To prevent the confirm box from appearing simply do not add a "return" to your function.

Also, another important thing to note is that the onbeforeunload event is fired every time the page is about to unload.

In the JavaScript function that handles this event you can do anything you want to. For instance, if they navigate away, you could put in an Ajax call to indicate to the server that the user should be logged out...or that resources should be cleaned up....or record anything you'd like really.

Please note that, at this time, the Opera web browser does not support the OnBeforeUnload event

I hope this little article was helpful to you. Happy Coding!

-Frinny

[Maria R]

Well, it seems like this doesn't work as posted :(