javascript window.onbeforeunload 确认对话框的捕获结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5399622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Capturing result of window.onbeforeunload confirmation dialog
提问by xzyfer
Is there a way to capture to result of the window.onbeforeunload confirmation dialog like the one below from Stack Overflow (this happens when leaving the 'Ask Question' page without posting the question)?
有没有办法捕获 window.onbeforeunload 确认对话框的结果，如下面的 Stack Overflow 所示（这种情况发生在离开“提问”页面而不发布问题时）？
This is how it appears in Chrome, I believe it's slightly different in other browsers, but you always have some form of yes/no buttons.
这就是它在 Chrome 中的显示方式，我相信它在其他浏览器中略有不同，但您总是有某种形式的是/否按钮。
Presumably if they're still on the offending page after the event has been triggered they chose to stay and you could probably figure this out by watching the sequence of js. However I would like to know how to determine if they clicked "Leave this page"?
大概如果他们在事件被触发后仍然在违规页面上，他们选择留下来，你可以通过观察 js 的序列来弄清楚这一点。但是我想知道如何确定他们是否点击了“离开此页面”？
I've implemented this like below:
我已经实现了如下：
// concept taken from SO implementation
function setConfirmUnload(showMessage, message) {
window.onbeforeunload = showMessage ? (message ? message : "this is a default message") : null;
}
// pseudo code
listen to changes on inputs
if any inputs fire a change event
call setConfirmUnload(true, 'My warning message')
noteI'm using jQuery within my site.
注意我在我的网站中使用 jQuery。
I'm essentially trying to implement a Gmail like drafting implementation, wherein if a user leaves a page with a form they've made changes to without saving they're warmed with a similar dialog. If they choose to discard they're changes and leave the page, I need to clean up some temporary records from the database (I'm thinking an AJAX call, or simply submitting the form with a deleteflag) then sending them on their way.
我本质上是在尝试实现 Gmail 之类的草稿实现，其中如果用户离开一个带有表单的页面，他们在没有保存的情况下进行了更改，他们会收到一个类似的对话框。如果他们选择放弃他们所做的更改并离开页面，我需要从数据库中清理一些临时记录（我正在考虑 AJAX 调用，或者只是提交带有delete标志的表单）然后在途中发送它们。
My question also relates to:
我的问题还涉及：
在手动刷新页面后触发 onunload 处理程序中的 jQuery AJAX 调用。我如何保证 onunload 首先发生？
采纳答案by Haochi
You can have the exit confirmation using window.onbeforeunloadbut there isn't a way to find out which button the user clicked on.
您可以使用window.onbeforeunload进行退出确认，但无法找出用户单击了哪个按钮。
To quote an earlier response from jvenema from this thread:
The primary purpose for the beforeunload is for things like allowing the users the option to save changes before their changes are lost.
Besides, if your users are leaving, it's already too late [...]
beforeunload 的主要目的是允许用户选择在更改丢失之前保存更改。
此外，如果您的用户要离开，那就太晚了 [...]
回答by dev5er6
How about this:
这个怎么样：
$( window ).bind( 'beforeunload' , function( event ) {
setTimeout( function() {
alert( 'Hi againe!' );
} );
return '';
} ).bind( 'unload', function( event ) {
alert( 'Goodby!' );
} );
回答by mylogon
Late to the party, but I found the following code (in TypeScript) to be a decent way to detect if the person clicked on 'Ok' on that confirmation dialogue window.
聚会迟到了，但我发现以下代码（在 TypeScript 中）是一种不错的方式来检测此人是否在该确认对话窗口中单击了“确定”。
public listenToUnloadEvents(): void {
window.addEventListener('beforeunload', (e) => {
const confirmationMessage = '\o/';
(e || window.event).returnValue = confirmationMessage; // Gecko + IE
return confirmationMessage; // Webkit, Safari, Chrome etc.
});
window.addEventListener('unload', () => {
this.sendNotification(Action.LEFT)
});
}
I'm not sure how much time you have to run code in the unloadevent, but in this instance, I am sending a notification through Socket.io, so it's very quick at completing.
我不确定在unload事件中运行代码需要多长时间，但在本例中，我通过 Socket.io 发送通知，因此完成速度非常快。
As for detecting the cancel on that notification, as someone else mentioned, creating a global variable like let didEnterBeforeUnload = falsecould be set to truewhen the beforeunloadevent fires. After this, by creating the third event, like so (again, in TypeScript), you can infer the user pressing cancel
至于检测该通知的取消，正如其他人所提到的，创建一个全局变量，例如let didEnterBeforeUnload = false可以true在beforeunload事件触发时设置为。在此之后，通过创建第三个事件，像这样（再次，在 TypeScript 中），您可以推断用户按下了取消
window.addEventListener('focus', (e) => {
if (didEnterBeforeUnload) {
console.log('pressed cancel')
}
didEnterBeforeUnload = false
});
As a side-note though, these events won't (iirc) fire unless you have interacted with the page. So make sure to click or tap into the page before trying to navigate away during your testing.
不过作为旁注，除非您与页面进行了交互，否则这些事件不会 (iirc) 触发。因此，请确保在测试期间尝试导航之前单击或点击页面。
I hope this helps anyone else out there!
我希望这可以帮助其他人！
