473,378 Members | 1,578 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes and contribute your articles to a community of 473,378 developers and data experts.

Using the OnBeforeUnload JavaScript Event

Frinavale
9,735 Expert Mod 8TB
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:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.      window.onbeforeunload = function(){ return;}
  3. </script>
  4.  
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:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.      window.onbeforeunload = function(){ return 'Your Returned String Goes Here';}
  3. </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.
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.      window.onbeforeunload = function(){}
  3. </script>
  4.  
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
Mar 17 '08 #1
1 108626
Well, it seems like this doesn't work as posted :(
Nov 7 '10 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: Dan | last post by:
In response to... DSAsteve@aol.com 6/20/2003 post wc_fl@NOSPAM.hotmail.com 3/26/2003 post ....The javascript event calendar found at http://www.scriptcalendar.com satsifies both...
1
by: ritskits | last post by:
I have the dropdownlist that is populated when the form is loaded. I have the button that opens search child window using the modalwindowdialog and it returns the value that I want to add to the...
19
by: Sjaakie Helderhorst | last post by:
Hello, I need to add a Javascript event (onClick) to a servercontrol (asp:checkbox). Checkbox is named 'cbDoMail'. Assumed that 'cbDoMail.Attributes.Add("onClick", "doJavascriptThing()") would do...
3
by: Neven Klofutar | last post by:
Hi, How can I acomplish following: I want to create a file on server using onClick server event, and then I want to open that file in new window using Javascript window.open(). How can I do it...
8
by: Nathan Sokalski | last post by:
I add a JavaScript event handler to some of my Webcontrols using the Attributes.Add() method as follows: Dim jscode as String = "return (event.keyCode>=65&&event.keyCode<=90);"...
1
by: sshan | last post by:
I need to invoke javascript event onKeyDown, which should get invoked when we press any key from anywhere of the page. currently I am callin like this: <head> <script type="text/javascript">...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.