Vaadin JavaScript 卸载事件侦听器未触发答案

【问题标题】：Vaadin JavaScript unload event listener not firingVaadin JavaScript 卸载事件侦听器未触发
【发布时间】：2016-06-08 10:54:36
【问题描述】：

我有一个 Vaadin 7 应用程序，我需要可靠地检测用户离开或导航离开页面以便执行一些清理工作。

我的目标是让页面在浏览器/标签关闭时弹出一个确认对话框，如果用户选择离开页面，然后我执行清理操作。

我对 JavaScript 相当缺乏经验，但我发现 'onbeforeunload' 和 'onunload' 是可以使用的函数。

此时，我进入页面时使用如下代码：

JavaScript.getCurrent().execute(
    "beforeCloseListenerGlobal = function beforeCloseListener (e) {\nvar e = e || window.event;\nvar message = " + LEAVE_PAGE_MESSAGE + ";\nif(e) e.returnValue = message;\nreturn message;\n};\n" +
    "closeListenerGlobal = function closeListener () {\ncatchClose();\n};\n" +
    "addCloseListenersGlobal = function addCloseListeners () {\nwindow.addEventListener('beforeunload', beforeCloseListenerGlobal);\nwindow.addEventListener('unload', closeListenerGlobal);\n};\n" +
    "removeCloseListenersGlobal = function removeCloseListeners () {\nwindow.removeEventListener('beforeunload', beforeCloseListenerGlobal);\nwindow.removeEventListener('unload', closeListenerGlobal);\n};"       
);

然后，当我点击界面上的“开始”按钮开始操作时：

JavaScript.getCurrent().execute("addCloseListenersGlobal();");

当我离开我的网页时，例如通过关闭选项卡，我会得到一个确认弹出窗口，这正是我想要的。但是，如果我单击是，页面会关闭，但我的“卸载”事件不会触发。当我点击相应的“停止”按钮时，清理工作正常，所以我知道那部分很好。

据我了解，主流浏览器都支持 onunload（我尝试过 Firefox、Chrome、Safari 和 Opera）。更有趣的是，如果我使用以下代码，那么我的 closeListener 会在 'beforeunload' 监听器上触发，但不会在 'unload' 监听器上触发：

JavaScript.getCurrent().execute(
    "function closeListener() { catchClose(); } " +
    "window.addEventListener('beforeunload', closeListener); " +
    "window.addEventListener('unload', closeListener);"
);

所以我的问题是，'unload' 侦听器不触发的原因是什么？这种方法是执行清理操作的可靠方法吗？

注意：以下是网页关闭时清理操作的函数回调，以防对“卸载”侦听器产生任何影响。我根本没有打印出来，这意味着没有调用“catchClose”函数。

JavaScript.getCurrent().addFunction("catchClose", arguments -> {
    System.out.println("catchClose callback from " + Page.getCurrent().getWebBrowser().getBrowserApplication());
    presenter.webPageClosed();
});

编辑：通过进一步调查，它实际上似乎 unload 方法偶尔会正确触发，但我无法确定它何时以及为什么这样做。另外，我发现如果我在“closeListener”函数中放置一个断点，它就会被调用，并且我的卸载工作绝对正常。

编辑：对我来说，现在代码似乎适用于 Safari、Firefox 和 Opera，但不适用于 Chrome。我怀疑这是由于 my related question 的副作用，我现在已经解决了。

【问题讨论】：

标签： javascript addeventlistener vaadin7 onbeforeunload onunload

【解决方案1】：

我找到了解决问题的方法。

我怀疑这个问题的大部分是通过my other related issue 的解决方案解决的，该解决方案涉及将代码的某些部分放入同步方法中。修复此问题后，卸载方法适用于我测试过的大多数浏览器。然而，Chrome 仍在运行，只会在浏览器关闭时触发卸载事件，而不是在标签关闭时触发。添加一个 'pagehide' 监听器似乎意味着 Chrome 选项卡关闭现在可以正常运行。

因此，'unload' 和 'pagehide' 事件的组合似乎适用于所有浏览器，并且（就我而言）似乎是可靠的，并且我的清理总是在以下情况下执行用户离开页面。

【讨论】：