DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. JavaScript
  4. Handling Page Unload Using JavaScript

Handling Page Unload Using JavaScript

Ryan Sukale user avatar by
Ryan Sukale
·
Dec. 17, 12 · Interview
Like (0)
Save
Tweet
Share
11.91K Views

Join the DZone community and get the full member experience.

Join For Free
Recently for one of my projects, I was working on trying to implement some functionality wherein if the user tried to leave web page by any other means other than submitting a form, (s)he would be prompted for confirmation. It was part of one of the research experiment surveys that I was designing. So, if the user left the page, we would simply discard the user's responses as invalid because partial responses are of no use to do any meaningful analysis.
Apparently, there are plenty of ways in which a user can close a webpage - the back button, the close button, or maybe some other gestures that I might be unaware of that are present in some of the newer web-browsing applications/devices.
What I found interesting was that there is a very simple and convenient way to check when a page is being 'unloaded' from a browser window. Javascript lets you bind a neat little handler to the 'window.onbeforeunload' property which tells the runtime that a web page is going to be unloaded.
Being a jQuery fanatic, I usually tend to use jQuery for all such stuff, since it makes maintenance a far easier task than writing pure JavaScript. So, my jQuery instincts told me to use the new on method to bind an event handler to the event. And it did work pretty good. All I did was this -
window.onbeforeunload = function(){ return "Are you sure
you want to leave the page?"; };
Oh, I am sure that message looks familiar on many marketing sites. You can be assured that I am not creating one more such website. In fact, even the message that I displayed was  something completely different. This is just meant to be a sample.
Easy peasy, and that works. Now, the issue comes when the user actually submits the form. The issue is that this function fires if the user leaves the page in any way, which does make a lot of sense, because after all, the user is leaving the page.
However, what I did not want was for the function to fire when the user submitted the form. So, what did I do? I just created a submit handler for my form and then tried to unbind the event handler using the off function of jQuery.
Neat as it may sound, that did not work. I am still not sure why. However after going through a couple of posts wondering what I had done wrong, it dawned on me that a better way to handle this feature was to both bind and unbind an event handler for this function directly using pure JavaScript.
So, this is what i eventually ended up doing
//For binding
window.onbeforeunload = confirmExit;
function confirmExit()
{
 return "Are you sure you want to leave this page?";
}
 
//For unbinding
$('#myForm').submit(function(event){
 window.onbeforeunload = null;
});
And that's pretty much all it took to create a page that warns the user before (s)he accidentally (or intentionally) attempts to leave a web page.
Also, after completing my piece of code, i stumbled across this jQuery unload function, that I beieve pretty much does the same thing.
Signing Off
Ryan
JavaScript

Published at DZone with permission of Ryan Sukale. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Mr. Over, the Engineer [Comic]
  • 2023 Software Testing Trends: A Look Ahead at the Industry's Future
  • Educating the Next Generation of Cloud Engineers With Google Cloud
  • Do Not Forget About Testing!

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: