Omnifaces beforeunload 在某些情况下不起作用

Question

我将 JSF 与 omnifaces 和 cdi 一起使用。在 xhtml 页面中，我使用了一些类似的 js（在下面的 jsf 页面上有更多详细信息）

window.onbeforeunload = function(e){
    // some other stuff
    return 'unsaved data';
};

如果 window 将要卸载且剩余未保存的数据，则激活浏览器的默认确认对话框。

填写表格并重定向到同一页面，弹出警告。如果我决定 'stay on page'，我将能够继续我的工作并随后提交我的表格，就像我预期的那样。

问题：如果我导航到其他页面或尝试关闭选项卡 ，警告也按预期出现。但在这种情况下，一个 http POST 提交 'omnifaces.event: unload' 被发送到服务器。据我所知，这会导致 Bean 的 onDestroy() 被调用。如果我选择留下，表单中的所有值仍然存在于页面上，但是在提交表单时，会为这些值抛出 NPE（我猜是因为 bean 已经被销毁了，不尊重我在确认对话框中的决定） .

经过几个小时的研究，我无法弄清楚为什么第二种情况导致 bean 卸载，而第一种方法等待确认对话框的结果...有什么想法吗？

我已经注意到 window.onbeforeunload 应该用纯 js 调用，就像 ViewScoped 中提到的那样。这适用于第一种情况，但不适用于第二种情况。

编辑:

重现步骤位于jsf页面。如果你按照这些，你应该能够理解我的问题。

SomeBean

import org.omnifaces.cdi.ViewScoped;    
import javax.annotation.PostConstruct;
import javax.annotation.PreDestroy;
import javax.inject.Named;
import java.io.Serializable;

@Named
@ViewScoped
public class SomeBean implements Serializable {

    private String fieldA;
    private String fieldB;
    private String info;

    @PostConstruct
    public void init(){
        this.fieldA = null;
        this.fieldB = null;
        this.info = "bean = " + this;
    }

    @PreDestroy
    public void preDestroy() {
        /* triggered when performing a navigation to other resources or
           closing the browser tab (unwanted), but not invoked if navigation is done
           within the same resource, e.g by using templates and compositions (wanted) */
        this.info = "destroy will be invoked for bean " + this;
    }

    public void submit(){
        // do smth. with the fields
    }

    public String getFieldA() {
        return fieldA;
    }

    public void setFieldA(String fieldA) {
        this.fieldA = fieldA;
    }

    public String getFieldB() {
        return fieldB;
    }

    public void setFieldB(String fieldB) {
        this.fieldB = fieldB;
    }

    public String getInfo() {
        return info;
    }

    public void setInfo(String info) {
        this.info = info;
    }
}

JSF 页面

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
      xml:lang="en" lang="en">
<h:head>
    <title>reproduce example</title>

    <script type="application/javascript">
        $(document).ready(function () {
            var unsavedData = false;

            function setUnsavedData(flag) {
                unsavedData = flag;
            }

            window.onbeforeunload = function (e) {
                e = e || window.event;
                if (unsavedData) {
                    if (e) {
                        e.preventDefault();
                        e.returnValue = 'Any string';
                    }
                    return 'Any string';
                } else {
                    return undefined;
                }
            };

            $(document).on("change", ":input:not(.stateless)", function () {
                setUnsavedData(true);
            });

            $(document).on("click", "button.stateless", function () {
                setUnsavedData(false);
            });
        });
    </script>
</h:head>
<h:body>
    <h:form id="myform">
        <h3>steps to reproduce:</h3><br/>
        1) enter some value for fieldA<br/>
        2) click the 'navigate via navigationBean' link > confirm the dialog and 'stay on page'<br/>
        3) press the submit button > as you can see, the bean instance is still the same and value is passed.<br/>
        4) enter some value for fieldB<br/>
        5) click somewhere else on the page to lose the input's focus (otherwise the confirm dialog won't show up!)<br/>
        7) close the browser tab or use the browser's nav buttons > confirm the dialog and 'stay on page'<br/>
        8) press the submit button again > as you can see now, submit has not been called! Pressing submit shows the bean instance has changed!<br/><br/>
        <h4> > For this example, values are still usable after the new bean was initialized. Because the original page is way more complex then this example, <br/>
            I really need to prevent onmnifaces from initializing a new bean, when a user confirms to stay on the page, even if he tries to close the tab!</h4><br/>
        <br/>
        fieldA
        <p:inputText value="#{someBean.fieldA}"/>

        <!-- note: in real code this is represented by a NavigationBean logic!-->
        <p:commandLink value="navigate via navigationBean"
                       action="#"
                       ajax="false">
        </p:commandLink>
        <br/>
        fieldB
        <p:inputText value="#{someBean.fieldB}"/>
        <br/>
        <p:commandButton
                id="submitBtn"
                value="submit"
                action="#{someBean.submit()}"
                process="@form"
                update="@form" styleClass="stateless">
        </p:commandButton>
        <br/>
        <br/>
        bean info: <p:outputLabel id="output_1" value="#{someBean.info}"/>
        <br/>
        value info for fieldA: <p:outputLabel id="output_2" value="#{someBean.fieldA}"/>
        <br/>
        value info for fieldB: <p:outputLabel id="output_3" value="#{someBean.fieldB}"/>
    </h:form>
</h:body>
</html>

注意：这是一个最小化版本，原版有更多细节，但由于我们公司的一些限制，我无法展示完整的代码堆栈。我希望这还足够，我会显示与问题相关的部分。

Omnifaces 版本为 2.7

Answer 1

@ViewScoped 卸载脚本在 HTML <body> 结束时初始化。届时它将在装饰之前检查现有的 window.onbeforeunload 函数。

您的 window.onbeforeunload 函数是在 $(document).ready() 期间定义的。但是这还没有在HTML<body>结束时执行。它仅在 <html> 结束后 执行。因此 @ViewScoped 卸载脚本将无法正确装饰它。

您需要确保 window.onbeforeunload 在 初始化 @ViewScoped 卸载脚本之前定义。您可以通过将其放在外部 $(document).ready() 并通过 <h:outputScript target="head"> 或 <h:outputScript target="body"> 导入包含定义的 JavaScript 文件来实现。将脚本内嵌在 <head> 中也有效，但不推荐这样做，因为它只会使 HTML 文档变大，而且不会为浏览器提供缓存脚本的机会。

Omnifaces beforeunload 在某些情况下不起作用

Omnifaces beforeunload not working in some cases

javascript

jsf

cdi

dom-events

omnifaces