khe*_*lll 142 javascript browser jquery events
我想捕获浏览器窗口/选项卡关闭事件.我用jQuery尝试了以下内容:
jQuery(window).bind(
"beforeunload",
function() {
return confirm("Do you really want to close?")
}
)
但它也适用于表单提交,这不是我想要的.我想要一个仅在用户关闭窗口时触发的事件.
SLa*_*aks 201
beforeunload当用户出于任何原因离开您的页面时,该事件将触发.
例如,如果用户提交表单,单击链接,关闭窗口(或选项卡)或使用地址栏,搜索框或书签转到新页面,则会触发它.
您可以使用以下代码排除表单提交和超链接(除了其他框架):
var inFormOrLink;
$('a').on('click', function() { inFormOrLink = true; });
$('form').on('submit', function() { inFormOrLink = true; });
$(window).on("beforeunload", function() {
return inFormOrLink ? "Do you really want to close?" : null;
})
对于早于1.7的jQuery版本,请尝试以下方法:
var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });
$(window).bind("beforeunload", function() {
return inFormOrLink ? "Do you really want to close?" : null;
})
该live方法不适用于该submit事件,因此如果添加新表单,则还需要将处理程序绑定到该表单.
请注意,如果其他事件处理程序取消了提交或导航,则如果稍后实际关闭该窗口,您将丢失确认提示.您可以通过记录submit和click事件中的时间来解决这个问题,并检查是否beforeunload会在几秒钟后发生.
kar*_*m79 44
也许只是解除beforeunload窗体submit事件处理程序中的事件处理程序:
jQuery('form').submit(function() {
jQuery(window).unbind("beforeunload");
...
});
des*_*esm 15
对于跨浏览器解决方案(在Chrome 21,IE9,FF15中测试),请考虑使用以下代码,这是Slaks代码的略微调整版本:
var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });
$(window).bind('beforeunload', function(eventObject) {
var returnValue = undefined;
if (! inFormOrLink) {
returnValue = "Do you really want to close?";
}
eventObject.returnValue = returnValue;
return returnValue;
});
请注意,自Firefox 4以来,消息"你真的要关闭吗？" 没有显示.FF只显示一般消息.请参阅https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload中的注释
Beh*_*adi 11
window.onbeforeunload = function () {
return "Do you really want to close?";
};
我的回答旨在提供简单的基准。
请参阅@SLaks 答案。
$(window).on("beforeunload", function() {
return inFormOrLink ? "Do you really want to close?" : null;
})
每当用户关闭页面（x按钮或CTRL+ W）时，浏览器都会执行给定的beforeunload代码，但不会无限期地执行。唯一的例外是确认框 ( return 'Do you really want to close?)，它将等待用户的响应。
铬：2 秒。
火狐：？（或双击，或强制关闭）
边缘：？（或双击）
Explorer 11：0 秒。
Safari :待办事项
我们用来测试的内容：
它所做的是在浏览器关闭其页面（同步）之前发送尽可能多的请求。
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function request() {
return $.ajax({
type: "GET",
url: "http://localhost:3030/" + Date.now(),
async: true
}).responseText;
}
window.onbeforeunload = () => {
while (true) {
request();
}
return null;
}
</script>
</body>
</html>
铬输出：
GET /1480451321041 404 0.389 ms - 32
GET /1480451321052 404 0.219 ms - 32
...
GET /hello/1480451322998 404 0.328 ms - 32
1957ms ? 2 seconds // we assume it's 2 seconds since requests can take few milliseconds to be sent.
| 归档时间： |
|
| 查看次数： |
365823 次 |
| 最近记录： |