个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 01:32:02 30 4
gpt4 key购买 nike

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

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

如果窗口即将被卸载且仍有未保存的数据，则激活浏览器的默认确认对话框。

填写表单并重定向到同一页面，会弹出警告。如果我决定“留在页面上”，我将能够继续我的工作并随后提交我的表单，就像我预期的那样。

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

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

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

编辑:

重现步骤位于 jsf 页面上。如果您遵循这些，您应该能够理解我的问题。

一些 bean 

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

最佳答案

@ViewScoped卸载脚本在 HTML <body> 末尾初始化。此时它将检查现有的 window.onbeforeunload在装饰它之前先运行它。

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

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

关于javascript - Omnifaces beforeunload 在某些情况下不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53176575/

30 4 0
文章推荐： apache - 简单的 .htaccess 子域重写
文章推荐： python - 如何对字符串中的日期进行排序？ (Python)
文章推荐： python - 合并两个不同形状的数据框中的列
文章推荐： javascript - html/javascript 如何知道属性是 bool 值而不是字符串
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com