When a page is exiting or unloading, the ‘unload‘ event will be activate, however, this event can not stop a page from exit.
$(window).bind('unload', function(){});
Since jQuery 1.4, you can bind the ‘beforeunload‘ event to $(windows) object to stop a page from exit , unload or navigating away.
$(window).bind('beforeunload', function(){
return '';
});
With ‘beforeunload‘ event attached, when you close the page, hits the back button or reload the page, a confirmation box will prompt to ask you whether you really want to go, choose ok to exit the page: cancel to stop the page from exit and stay on the same page.
In addition, you are allow to add your own message inside the confirmation box :
$(window).bind('beforeunload', function(){
return '>>>>>Before You Go<<<<<<<< \n Your custom message go here';
});
P.S The ‘beforeunload’ event is supported since jQuery 1.4
Try it yourself
<html>
<head>
<title>Refresh a page in jQuery</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<h1>Stop a page from exit with jQuery</h1>
<button id="reload">Refresh a Page in jQuery</button>
<script type="text/javascript">
$('#reload').click(function() {
location.reload();
});
$(window).bind('beforeunload', function(){
return '>>>>>Before You Go<<<<<<<< \n Your custom message go here';
});
</script>
</body>
</html>
About Author
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.
why this is not working with chrome ????????????
Is there way to call logout funciton on click of Leave This Page confirmation button. Thank you.
How can we avoid this for same domain and display a alert to other domains
The algorithm is get your URL text box and compare with yours.
Yes, it’l be work, But i need close event whenever user click on close tab or close browser, then only popup should come. i also use wisepops so, can you please help me out.
Beforeunload event is fired when the window, the document, and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point. If a string is assigned to the returnValue. you can check the site MS Paint Support for the technical support related to Microsoft services.
Thanks for the great article! Really useful!
the message cannot be changed.
I want to prevent reload without dialog box? i.e prevent silently.
Thank you for thus useful article. I need to clarify one thing is, I can able to change the default text in Chrome Browser which is not working in Firefox. How to overcome this issue?
Aw, this was a very nice post. In idea I want to put in writing like this additionally ?taking time and actual effort to make an excellent article?however what can I say?I procrastinate alot and under no circumstances seem to get something done.
Thanks for the tutorial but how can we make a confirmation alert that appear on page close but with custom message like ” Really Are You Sure You want to leave Dude !”
because when I used your code i can’t use a custom message 🙁
How about styling the onload pop up? And changing the buttons or in general adding content to it, a bit like in a modal. Got a solution for that?
Hi can we modify the text on the warning message
i want only this message ” There is a change. do you want to close the display”.
in internet explorer it is showing some extra message that is coming from browser itself.
Please provide me solution… i really need this
Thanks!!just what I was looking for!
Awesome, thanks! @mariek good call on the unbind event
anyone knoe how to acheive this in chrome ?
was trying this http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/ but it causes an infinite loop in firefox
How much it is compatible with different browsers? Many a times browser cause lot of pain..
Nice script for it function. Facebook uses this type of script on certain functions.
Thanks for sharing!
Hi,
Thanks for the trick. I’d like to use it on a form, but the message display even when I click on the submit button, how can I prevent that ? Thank you for your help.
ok, found it :
$(“#myform”).submit(function(){
$(window).unbind(“beforeunload”);
});
i only want to show this popup on close of browser not every refresh. could you please help me.
Does this fire window.onbeforeunload beneath the covers?
The reason I’m asking is because onbeforeunload is being ignored in current versions of safari (and possibly chrome)
$(window).unload(function(){
var c= confirm (“Are you sure?”);
if (c){
alert(“Thanks. Good luck!”);
}
else{
????
}
});
I used this code and this code easily run on my page so you also try this.
Google Chrome Customer Support
Firefox don’t allow to throw custom message for this kind of events. See this topic for more information:
https://bugzilla.mozilla.org/show_bug.cgi?id=588292
Is there way to call logout funciton on click of Leave This Page confirmation button