14

有没有一种方法可以从 Stack Overflow 捕获如下window.onbeforeunload确认对话框的结果（在离开“提问”页面而不发布问题时会发生这种情况）？

这就是它在 Chrome 中的显示方式，我相信它在其他浏览器中略有不同，但你总是有某种形式的是/否按钮。

window.onbeforeunload 确认对话框

大概如果他们在事件触发后仍然在有问题的页面上，他们会选择留下来，你可以通过观察 js 的顺序来弄清楚这一点。但是我想知道如何确定他们是否点击了“离开此页面”？

我已经实现了如下：

// 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')

注意我在我的网站中使用 jQuery。

我本质上是在尝试实现类似 Gmail 的草拟实现，其中如果用户离开页面时使用了他们已更改但未保存的表单，他们会被类似的对话框加热。如果他们选择放弃他们所做的更改并离开页面，我需要从数据库中清理一些临时记录（我正在考虑 AJAX 调用，或者只是提交带有delete标志的表单），然后将它们发送到他们的路上。

我的问题还涉及：

在手动刷新页面后触发 onunload 处理程序中的 jQuery AJAX 调用。我如何保证 onunload 先发生？

4

3 回答 3

6

这个怎么样：

$( window ).bind( 'beforeunload' , function( event ) {
    setTimeout( function() {
        alert( 'Hi againe!' );
    } );
    return '';
} ).bind( 'unload', function( event ) {
    alert( 'Goodby!' );
} );
于 2013-06-05T19:10:47.830 回答
5

您可以使用window.onbeforeunload进行退出确认，但无法找出用户单击了哪个按钮。

引用此线程中 jvenema的较早回复：

beforeunload 的主要目的是允许用户选择在更改丢失之前保存更改。

此外，如果您的用户要离开，那已经太晚了 [...]

于 2011-03-23T02:04:38.007 回答
2

聚会迟到了，但我发现下面的代码（在 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)
  });
}

我不确定在unload事件中运行代码需要多少时间，但在这种情况下，我通过 Socket.io 发送通知，因此完成速度非常快。

至于检测该通知的取消，正如其他人所提到的，创建一个全局变量就像let didEnterBeforeUnload = false可以设置为事件触发时true。beforeunload在此之后，通过创建第三个事件，就像这样（再次在 TypeScript 中），您可以推断用户按下取消 

window.addEventListener('focus', (e) => {

  if (didEnterBeforeUnload) {
    console.log('pressed cancel')
  }

  didEnterBeforeUnload = false
});

不过附带说明一下，除非您与页面进行了交互，否则这些事件不会 (iirc) 触发。因此，在测试期间尝试离开之前，请确保单击或点击页面。

我希望这对其他人有帮助！

于 2018-09-04T11:53:47.543 回答