jquery beforeunload when closing (not leaving) the page?

Question

How can I display "Are you sure you want to leave the page?" when the user actually tries to close the page (click the X button on the browser window or tab) not when he tries to navigate away from the page (click on another link).

My client wants a message to appear when the user tries to close the page "Are you sure you want to leave the page? You still have items in your shopping cart."

Unfortunately $(window).bind('beforeunload') doesn't fire only when the user closes the page.

jQuery:

function checkCart() { $.ajax({ url : 'index.php?route=module/cart/check', type : 'POST', dataType : 'json', success : function (result) { if (result) { $(window).bind('beforeunload', function(){ return 'leave?'; }); } } }) }

You can't. You cannot programatically tell the difference between the browser closing or the user navigating away from your page. — user229044
– user229044 ♦, Commented Sep 16, 2013 at 5:05
Your message include some code that indicate an Ajax operation running. Is there some of them we need to take into consideration ? (because except that code, you didn't explicitily mentionned it) — Cyril N.
– Cyril N., Commented Sep 16, 2013 at 6:35
you can't tell if a window is closed or navigate to another URL, consider when you are using a multi-tab browser, there makes no difference, but if you are using hash navigation (e.g. yourdomain.com/#path=/index/news&id=1), you can manage it throw javascript when navagiting — alphakevin
– alphakevin, Commented Sep 18, 2013 at 9:08

Human Being · Accepted Answer · 2015-03-20 13:01:02Z

155

+25

You can do this by using JQuery.

For example ,

<a href="your URL" id="navigate"> click here </a>

Your JQuery will be,

$(document).ready(function(){ $('a').on('mousedown', stopNavigate); $('a').on('mouseleave', function () { $(window).on('beforeunload', function(){ return 'Are you sure you want to leave?'; }); }); }); function stopNavigate(){ $(window).off('beforeunload'); }

And to get the Leave message alert will be,

$(window).on('beforeunload', function(){ return 'Are you sure you want to leave?'; }); $(window).on('unload', function(){ logout(); });

This solution works in all browsers and I have tested it.

edited Mar 20, 2015 at 13:01

answered Sep 16, 2013 at 7:44

Human Being

8,44728 gold badges98 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

noseratio Over a year ago

This is a good one (you probably should observe onsubmit too), but it won't work for browser's Back and Forward buttons. I anticipate there is no ideal solution to this.

Bit_hunter Over a year ago

code is fine. I want to run logout() function if user clicks on "Leave this Page" pop button. But how can I detect whether user have clicked on "Leave this Page" or not?

Aarohi Kulkarni Over a year ago

This $(window).on('unload', function() is not getting executed in Safari.

techie_28 Over a year ago

Will beforeunload fire if the browser is closing due to OS shutdown?

Adam Over a year ago

You can't provide custom messages anymore in Chrome or Firefox (because they want to prevent scam): developers.google.com/web/updates/2016/04/…

|

Padmanathan J · Accepted Answer · 2013-09-16 05:30:10Z

Try javascript into your Ajax

window.onbeforeunload = function(){ return 'Are you sure you want to leave?'; };

Reference link

Example 2:

document.getElementsByClassName('eStore_buy_now_button')[0].onclick = function(){ window.btn_clicked = true; }; window.onbeforeunload = function(){ if(!window.btn_clicked){ return 'You must click "Buy Now" to make payment and finish your order. If you leave now your order will be canceled.'; } };

Here it will alert the user every time he leaves the page, until he clicks on the button.

DEMO: http://jsfiddle.net/DerekL/GSWbB/show/

Community · Accepted Answer · 2017-05-23 12:02:43Z

Credit should go here: how to detect if a link was clicked when window.onbeforeunload is triggered?

Basically, the solution adds a listener to detect if a link or window caused the unload event to fire.

var link_was_clicked = false; document.addEventListener("click", function(e) { if (e.target.nodeName.toLowerCase() === 'a') { link_was_clicked = true; } }, true); window.onbeforeunload = function(e) { if(link_was_clicked) { return; } return confirm('Are you sure?'); }

Community · Accepted Answer · 2017-05-23 12:34:30Z

As indicated here https://stackoverflow.com/a/1632004/330867, you can implement it by "filtering" what is originating the exit of this page.

As mentionned in the comments, here's a new version of the code in the other question, which also include the ajax request you make in your question :

var canExit = true; // For every function that will call an ajax query, you need to set the var "canExit" to false, then set it to false once the ajax is finished. function checkCart() { canExit = false; $.ajax({ url : 'index.php?route=module/cart/check', type : 'POST', dataType : 'json', success : function (result) { if (result) { canExit = true; } } }) } $(document).on('click', 'a', function() {canExit = true;}); // can exit if it's a link $(window).on('beforeunload', function() { if (canExit) return null; // null will allow exit without a question // Else, just return the message you want to display return "Do you really want to close?"; });

Important: You shouldn't have a global variable defined (here canExit), this is here for simpler version.

Note that you can't override completely the confirm message (at least in chrome). The message you return will only be prepended to the one given by Chrome. Here's the reason : How can I override the OnBeforeUnload dialog and replace it with my own?

As of jQuery 1.7 .live is deprecated. Instead of it the $(document).on('click', 'a', ...) should be used. .on is generally the preferred way over the old functions so for .bind it would be $('form').on('submit', ...).
I'm quite sure this answer is no more cross browser. Someone tested it?
As stated, I only copy/pasted the code. I'll edit the answer with a newest version
Thank you, but unfortunately the confirm doesn't show up when I close the tab.
.. and a big error I made (click instead of beforeunload as the document event).

user1850534 · Accepted Answer · 2013-09-16 07:29:34Z

Try this, loading data via ajax and displaying through return statement.

<script type="text/javascript"> function closeWindow(){ var Data = $.ajax({ type : "POST", url : "file.txt", //loading a simple text file for sample. cache : false, global : false, async : false, success : function(data) { return data; } }).responseText; return "Are you sure you want to leave the page? You still have "+Data+" items in your shopping cart"; } window.onbeforeunload = closeWindow; </script>

It's not a good idea to make your user wait for the response of a synchronous AJAX call every time they click a link in your site.

Salman Akbar · Accepted Answer · 2023-03-14 16:31:56Z

here is function you can use in your code anywhere

function setProcessing(isProcessing) { $(window).on('beforeunload', function(event) { if (isProcessing) { event.preventDefault(); return ''; } }); }

just set setProcessing(true) or setProcessing(false)

Community · Accepted Answer · 2017-05-23 12:34:30Z

-2

You can try 'onbeforeunload' event.

Also take a look at this-

Dialog box runs for 1 sec and disappears?

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Sep 20, 2013 at 19:35

halkujabra

2,9524 gold badges28 silver badges38 bronze badges

Collectives™ on Stack Overflow

jquery beforeunload when closing (not leaving) the page?

7 Answers 7

7 Comments

Comments

Comments

5 Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

Comments

Comments

5 Comments

1 Comment

Comments

Comments

Linked

Related