如何在JSF组件中使用JavaScript变量？附相关代码示例

首先得明确一个核心点：JSF是服务器端渲染框架，页面上的EL表达式（比如#{bean.m_strRecentlyUsedImg}）在服务器生成HTML的时候就已经被解析成静态文本了；而JavaScript变量是在客户端浏览器运行时才存在的，两者运行环境完全不同，所以你没法直接在JSF的EL表达式里引用JavaScript变量。

针对你当前的场景（点击图片切换状态，更新图片的title和alt），这里有两种实用的解决方案：

方案1：纯JavaScript直接更新DOM元素属性 #

如果你的状态不需要同步到后台Bean，只是客户端临时显示变化，这种方法最简单直接。我们可以在点击事件里修改图片元素的title和alt属性，不用依赖JSF的重新渲染。

首先在页面渲染时，把国际化资源提前存入JS变量（避免在JS里重复写EL表达式），然后修改点击函数：

<!-- 页面头部或合适位置定义JS变量 -->
<script>
    // 从服务器端获取国际化文本，渲染时会被替换成实际值
    const RECENTLY_USED = '#{OMNIGEN.RECENTLY_USED}';
    const RECENTLY_USED_HIDE = '#{OMNIGEN.RECENTLY_USED_HIDE}';
    
    // 客户端状态变量
    let m_strRecentlyUsedImg = 'Y';

    function showRecentlyUsed() {
        // 切换状态
        m_strRecentlyUsedImg = m_strRecentlyUsedImg === 'Y' ? 'N' : 'Y';
        
        // 获取图片元素
        const imgElement = document.getElementById('recentlyUsedImg');
        
        // 根据当前状态更新属性
        if (m_strRecentlyUsedImg === 'Y') {
            imgElement.title = RECENTLY_USED;
            imgElement.alt = RECENTLY_USED;
        } else {
            imgElement.title = RECENTLY_USED_HIDE;
            imgElement.alt = RECENTLY_USED_HIDE;
        }
    }
</script>

<!-- 原图片组件保持不变 -->
<h:graphicImage title="#{bean.m_strRecentlyUsedImg eq 'Y' ? OMNIGEN.RECENTLY_USED : OMNIGEN.RECENTLY_USED_HIDE}" 
                id="recentlyUsedImg" 
                alt="#{bean.m_strRecentlyUsedImg eq 'Y' ? OMNIGEN.RECENTLY_USED : OMNIGEN.RECENTLY_USED_HIDE}" 
                name="group.png" 
                onclick="showRecentlyUsed()" />

方案2：通过AJAX同步状态到后台Bean，重新渲染组件 #

如果需要把状态持久化到后台（比如页面刷新后状态依然保持），就需要用AJAX把客户端的状态同步到Bean，然后让JSF重新渲染图片组件。这里以PrimeFaces的p:remoteCommand为例（标准JSF可以用h:commandLink配合f:ajax实现类似效果）：

1. 修改页面代码，添加RemoteCommand #

<h:graphicImage title="#{bean.m_strRecentlyUsedImg eq 'Y' ? OMNIGEN.RECENTLY_USED : OMNIGEN.RECENTLY_USED_HIDE}" 
                id="recentlyUsedImg" 
                alt="#{bean.m_strRecentlyUsedImg eq 'Y' ? OMNIGEN.RECENTLY_USED : OMNIGEN.RECENTLY_USED_HIDE}" 
                name="group.png" 
                onclick="showRecentlyUsed()" />

<!-- PrimeFaces RemoteCommand：用于触发后台方法并重新渲染图片 -->
<p:remoteCommand name="updateBeanStatus" 
                 action="#{bean.updateRecentlyUsedStatus}" 
                 update="recentlyUsedImg" />

2. 在Bean中添加状态更新方法 #

public class Bean {
    private String m_strRecentlyUsedImg = "Y"; // 初始状态
    
    // 已有的getter和setter保持不变
    public String getM_strRecentlyUsedImg() {
        return m_strRecentlyUsedImg;
    }

    public void setM_strRecentlyUsedImg(String m_strRecentlyUsedImg) {
        this.m_strRecentlyUsedImg = m_strRecentlyUsedImg;
    }

    // 新增的状态更新方法
    public void updateRecentlyUsedStatus() {
        // 切换状态
        this.m_strRecentlyUsedImg = "Y".equals(this.m_strRecentlyUsedImg) ? "N" : "Y";
    }
}

3. 修改JavaScript函数，调用RemoteCommand #

function showRecentlyUsed() {
    // 调用RemoteCommand，触发后台状态更新并重新渲染图片
    updateBeanStatus();
}

两种方案的区别 #

• 方案1：轻量、快速，不需要和服务器交互，但状态只存在客户端，页面刷新后会回到初始值。
• 方案2：状态会同步到后台Bean，适合需要持久化状态的场景，但需要一次AJAX请求。

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