Vaadin JavaScript卸载事件侦听器未触发 [英] Vaadin JavaScript unload event listener not firing

问题描述

我有一个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 =函数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）; 
）; 
  

所以我的问题是，卸载侦听器不这样做的原因是什么

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

  JavaScript.getCurrent（ ）.addFunction（ catchClose，参数-> {
 System.out.println（ catchClose来自 + Page.getCurrent（）。getWebBrowser（）。getBrowserApplication（））的回调； 
演示者。 webPageClosed（）; 
}）; 
  

编辑：通过进一步的调查，实际上看来好像卸载方法偶尔会正确触发，尽管我尚无法确定何时以及为何这样做。另外，我发现，如果我在 closeListener函数中放置一个断点，它会被调用，并且我的卸载工作也很好。

编辑：现在对我来说似乎该代码适用于Safari，Firefox和Opera，但不适用于Chrome。我怀疑这是由于我的相关问题引起的问题，我现在已经解决了。

解决方案

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

我怀疑大多数问题已通过，其中涉及将某些代码部分放入同步方法中。解决此问题后，卸载方法可在我测试过的大多数浏览器中使用。但是，Chrome仍在播放，只会在浏览器关闭而不是选项卡关闭时触发卸载事件。

因此，卸载和 pagehide事件的组合似乎可以在所有浏览器上使用，并且（到目前为止，对我而言）似乎是可靠的，并且我的清理工作总是在用户离开页面时执行。

I have a Vaadin 7 application where I need to reliably detect a user leaving or navigating away from a page in order to carry out some cleanup.

My aim is to have the page pop up a confirmation dialog on browser/tab close, and if the user chooses to leave the page, then at that point I perform the cleanup operation.

I am fairly inexperienced at JavaScript, but from what I have discovered 'onbeforeunload' and 'onunload' are the functions to use.

At this point in time, I am using the following code when I enter the page:

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};"       
);

Then, when I click the "Start" button on my interface to start the operation:

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

When I navigate away from my webpage, by closing the tab for example, I get a confirmation pop-up, just as I want. However, if I click Yes, the page closes but my 'unload' event does not fire. When I click the respective "Stop" button, the cleanup works correctly, so I know that part is fine.

From what I've read the major browsers all support onunload (I've tried Firefox, Chrome, Safari and Opera). More interestingly, if I use the following code, then my closeListener fires on the 'beforeunload' listener, but not on the 'unload' listener:

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

So my question is, what could be the reason for the 'unload' listener not to fire? Is this method a good and reliable way to perform a cleanup operation?

Note: below is my function callback for the cleanup operation on webpage close, in case that would have any effect on the 'unload' listener. I do not get a print out at all, so that implies the "catchClose" function is not called.

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

Edit: Through further investigation it actually appears as though the unload method very occasionally does fire correctly, though I cannot pinpoint when and why it does that just yet. Also, I have discovered that if I put a breakpoint inside my "closeListener" function, it gets called, and my unload works absolutely fine.

Edit: For me it now appears as if the code works for Safari, Firefox and Opera, but not Chrome. I suspect it is due to a side effect from my related question which I have now resolved.

解决方案

I have found the solution to my problem.

I suspect that most of this issue was solved by the solution to my other related issue which involved putting certain parts of code into synchronous methods. After fixing this issue, the unload method worked across most of the browsers I have tested on. However, Chrome was still playing up and would only fire the unload event on browser close, and not on tab close. Adding in a 'pagehide' listener seems to mean that Chrome tab closing is now acting appropriately.

So, a combination of 'unload' and 'pagehide' events seems to work across all browsers, and (as of now for me) appears to be reliable, and my cleanup is always performed when the user leaves the page.

这篇关于Vaadin JavaScript卸载事件侦听器未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！