关闭(不离开)页面时 jquery before 卸载?

我如何显示“您确定要离开页面吗?”当用户实际尝试关闭页面时(单击浏览器窗口或选项卡上的 X 按钮) ,而不是当他尝试导航离开页面时(单击另一个链接)。

我的客户端希望在用户试图关闭页面时出现一条消息“您确定要离开该页面吗?”?你的购物车里还有东西。”

不幸的是,$(window).bind('beforeunload')并不仅仅在用户关闭页面时触发。

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?';
});
}
}
})
}
260151 次浏览

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?

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/

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>

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.

You can try 'onbeforeunload' event.

Also take a look at this-

Dialog box runs for 1 sec and disappears?

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?');
}