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

有没有办法捕获window.onbeforeunload确认对话框的结果,如Stack Overflow中的下一个(当离开’Ask Question’页面而不发布问题时会发生这种情况)?

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

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?

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

从这个post引用jvenema的早期回复:

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

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

这个怎么样:

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

晚到派对,但我发现以下代码(在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发送通知,所以它很快完成。

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

 window.addEventListener('focus', (e) => { if (didEnterBeforeUnload) { console.log('pressed cancel') } didEnterBeforeUnload = false }); 

但是,作为附注,除非您与页面进行了交互,否则这些事件不会(iirc)触发。 因此,在测试期间尝试离开之前,请务必点击或点按页面。

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