Question

有没有办法捕获window.onbeforeunload确认对话框的结果，如Stack Overflow中的下一个（当离开'Ask Question'页面而没有发布问题时会发生这种情况）？

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

window.onbeforeunload confirmation dialog

据推测，如果事件被触发后他们仍然在违规页面上，他们选择留下来，你可以通过观察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标志的表单）然后发送他们在路上。

我的问题还涉及：

jQuery AJAX call in onunload handler firing AFTER getting the page on a manual refresh. How do I guarantee onunload happens first?

Answer 1

这个怎么样：

$( window ).bind( 'beforeunload' , function( event ) {
    setTimeout( function() {
        alert( 'Hi againe!' );
    } );
    return '';
} ).bind( 'unload', function( event ) {
    alert( 'Goodby!' );
} );

Answer 2

您可以使用window.onbeforeunload进行退出确认，但无法找到用户点击的按钮。

引用jvenema from this thread的早期回复：

主要目的   beforeunload就是这样的   允许用户选择保存   在更改失败之前进行更改。

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

Answer 3

晚了聚会，但我发现以下代码（在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中），您可以推断用户按下cancel

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

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

  didEnterBeforeUnload = false
});

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

我希望这可以帮助其他人！

捕获window.onbeforeunload确认对话框的结果

3 个答案: