How to stop a page from exit or unload with jQuery

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 the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
25 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
24 Comment authors
jarvieskelli starklyricsparoles.comSamuel SolísLouis Otto Recent comment authors
newest oldest most voted
shobhit
Guest
shobhit

why this is not working with chrome ????????????

jarvies
Guest
jarvies

$(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

kelli stark
Guest
kelli stark

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.

lyricsparoles.com
Guest
lyricsparoles.com

Is there way to call logout funciton on click of Leave This Page confirmation button. Thank you.

Louis Otto
Guest
Louis Otto

Thanks for the great article! Really useful!

Oki Erie Rinaldi
Guest
Oki Erie Rinaldi

the message cannot be changed.

Md. Shohel Rana
Guest
Md. Shohel Rana

I want to prevent reload without dialog box? i.e prevent silently.

Venkatesh
Guest
Venkatesh

Is there way to call logout funciton on click of Leave This Page confirmation button

Gunaseelan
Guest
Gunaseelan

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?

???? ?????
Guest
???? ?????

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.

M.A.F.
Guest
M.A.F.

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 :(

Marc
Guest
Marc

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?

Gourav
Guest
Gourav

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

txomin
Guest
txomin

Thanks!!just what I was looking for!

Matt Cassarino
Guest
Matt Cassarino

Awesome, thanks! @mariek good call on the unbind event

ew
Guest
ew

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

Rakesh
Guest
Rakesh

How much it is compatible with different browsers? Many a times browser cause lot of pain..

trackback
Inject custom message to warn user from closing browser window | blog.yangsoft.com

[…] I resolved to jQuery and found that this posting here at http://www.mkyong.com/jquery/how-to-stop-a-page-from-exit-or-unload-with-jquery/ was most useful. The author of this posting gave a good example and even embedded a demo. The […]

Digital Extreme Media Group
Guest
Digital Extreme Media Group

Nice script for it function. Facebook uses this type of script on certain functions.
Thanks for sharing!

mariek
Guest
mariek

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.

mariek
Guest
mariek

ok, found it :
$(“#myform”).submit(function(){
$(window).unbind(“beforeunload”);
});

Sunil Somani
Guest
Sunil Somani

i only want to show this popup on close of browser not every refresh. could you please help me.

Tony
Guest
Tony

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)

trackback
jQuery Tutorial

[…] loading effect with jQuery. Page refresh with jQuery Refresh a page with jQuery location.reload(); Stop a page from exit or unload with jQuery Stop a page from exit or unload with jQuery “beforeunload” event. Check if an image is […]

coder
Guest
coder

How can we avoid this for same domain and display a alert to other domains

Samuel Solís
Guest
Samuel Solís

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