jquery在关闭(不离开)页面时卸载之前
jquery beforeunload when closing (not leaving) the page?
当用户实际尝试关闭页面(单击浏览器窗口或选项卡上的 X 按钮)而不是当他尝试离开页面(单击另一个链接)时,如何显示"您确定要离开页面吗?"。
我的客户希望在用户尝试关闭页面时显示一条消息"您确定要离开页面吗?您的购物车中仍有商品。
不幸的是,$(window).bind('beforeunload')
不会仅在用户关闭页面时触发。
j查询:
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?';
});
}
}
})
}
您可以使用 JQuery 执行此操作。
例如,
<a href="your URL" id="navigate"> click here </a>
你的JQuery
将是,
$(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');
}
并得到留言警报将是,
$(window).on('beforeunload', function(){
return 'Are you sure you want to leave?';
});
$(window).on('unload', function(){
logout();
});
该解决方案适用于所有浏览器,我已经对其进行了测试。
尝试 javascript 进入你的 Ajax
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
参考链接
示例 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.';
}
};
在这里,每次用户离开页面时,它都会提醒用户,直到他单击按钮。
演示:http://jsfiddle.net/DerekL/GSWbB/show/
信用应该在这里:如何检测触发 window.onbeforeunload 时是否单击了链接?
基本上,该解决方案添加一个侦听器来检测链接或窗口是否导致 unload 事件触发。
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?');
}
如 https://stackoverflow.com/a/1632004/330867 所示,您可以通过"过滤"导致此页面退出的内容来实现它。
如注释中所述,这是另一个问题中代码的新版本,其中还包括您在问题中提出的 ajax 请求:
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?";
});
重要提示:您不应该定义全局变量(此处canExit
),这是更简单的版本。
请注意,您无法完全覆盖确认消息(至少在 chrome 中)。您返回的消息只会附加到 Chrome 提供的消息前面。原因如下:如何覆盖OnBeforeUnload对话框并将其替换为我自己的对话框?
试试这个,通过ajax
加载数据并通过返回语句显示。
<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>
这是您可以在任何地方的代码中使用的函数
function setProcessing(isProcessing) {
$(window).on('beforeunload', function(event) {
if (isProcessing) {
event.preventDefault();
return '';
}
});
}
只需设置 setProcessing(true) 或 setProcessing(false)
你可以试试'onbeforeunload
'事件。
也看看这个——
对话框运行 1 秒然后消失?
- 我是否可以检测到javascript正在被卸载(作为调试模式)
- 动态加载和卸载js文件
- 在页面卸载时写入HTML5 FileSystem API存储
- 如何禁用窗口.当计时器超时时,打开卸载警报
- 从jqueryajax加载php页面卸载当前页面
- 火灾在卸载前确认警报仅适用于外部站点
- 在火狐浏览器卸载之前
- 在窗口中单击按钮完成之前,光标不会停止.请继续卸载
- 卸载未触发组件WillUnmount的子级
- ReacJS与猴面包树,如何在卸载组件后释放光标
- 避免重新评估和动态卸载用“require”调用的对象
- 我可以't在Chrome中触发卸载事件
- Modernizr IE跳过“;卸载”;
- 在AngularJS中手动加载和卸载外部javascript
- 有没有一种方法可以为卸载的lazylod图像隐藏alt标签
- 从模态卸载数据
- 页面卸载期间的JavaScript事件循环
- jquery在关闭(不离开)页面时卸载之前
- 如何在页面卸载/离开时发送AJAX请求
- 如何在卸载前提示后发现用户选择了“留下”还是“离开”按钮