如何在离开JSF页面时修改Bean字段值？优先纯JSF方案

原代码失效原因 #

1. 客户端ID错误：JSF组件的客户端ID会被父容器（如<h:form>）添加前缀，直接用getElementById('toogleTutorialmode')无法找到目标按钮。
2. 异步请求被中断：window.onunload触发时，浏览器会终止未完成的异步Ajax请求，而PrimeFaces的<p:commandButton>默认是异步请求，导致请求无法到达服务器。
3. 事件时机问题：unload事件触发时机过晚，浏览器已开始清理资源，难以保证请求执行完成。

方案一：优先推荐（JavaScript + PrimeFaces RemoteCommand） #

使用<p:remoteCommand>简化JS触发服务器端方法的逻辑，结合beforeunload事件和可靠的请求方式：

<h:form id="tutorialForm">
    <!-- 定义远程调用命令，直接绑定bean方法 -->
    <p:remoteCommand 
        name="terminateTutorial" 
        action="#{tutorial.setTutorialMode(false)}"
        async="false" <!-- 同步请求，确保页面卸载前执行完成 -->
    />
</h:form>

<script type="text/javascript">
    // 监听页面开始卸载事件
    window.addEventListener('beforeunload', function() {
        // 触发远程命令
        terminateTutorial();
    });
</script>

优化版（无阻塞体验） #

如果不想阻塞页面卸载，可使用navigator.sendBeacon发送请求（浏览器会后台保证请求完成）：

<h:form id="tutorialForm">
    <p:remoteCommand 
        name="terminateTutorial" 
        action="#{tutorial.setTutorialMode(false)}"
        />
</h:form>

<script type="text/javascript">
    window.addEventListener('beforeunload', function() {
        const formData = new FormData();
        // 构造PrimeFaces Ajax请求所需参数
        formData.append('javax.faces.partial.ajax', 'true');
        formData.append('javax.faces.source', '#{p:component('terminateTutorial')}');
        formData.append('javax.faces.behavior.event', 'action');
        formData.append('terminateTutorial', 'terminateTutorial');
        
        // 发送请求
        navigator.sendBeacon('#{request.contextPath}/当前页面路径.xhtml', formData);
    });
</script>

方案二：修复原隐藏按钮方案 #

如果坚持用隐藏按钮，需要修正ID获取和请求方式：

<h:form id="tutorialForm">
    <p:commandButton 
        style="visibility: hidden" 
        id="toogleTutorialmode" 
        action="#{tutorial.setTutorialMode(false)}"
        ajax="false" <!-- 改为同步非Ajax请求 -->
    />
</h:form>

<script type="text/javascript">
    window.addEventListener('beforeunload', function() {
        // 使用JSF EL获取正确的客户端ID
        const button = document.getElementById('#{p:component('toogleTutorialmode')}');
        if (button) {
            button.click();
        }
    });
</script>

关键注意事项 #

• 客户端ID获取：始终用#{p:component('组件ID')}获取JSF组件的完整客户端ID，避免因容器前缀导致找不到元素。
• 事件选择：优先使用beforeunload而非unload，前者在页面开始卸载时触发，有更充足的时间处理请求。
• 请求可靠性：navigator.sendBeacon是页面卸载时发送请求的最优选择，不会阻塞页面跳转，且浏览器会确保请求完成。

内容的提问来源于stack exchange，提问作者SNJ