如何从 JSF 中的 javascript 函数中获取 h:link 的结果值？

Question

我有一个像这样的h:link 元素

<h:link outcome="/overview.xhtml?source=menu"
        title="Overview">
            <div>...</div>
</h:link>

我想根据 JavaScript 中的 MobileMatcher 将布尔变量 phone 添加到 URI 地址。

换句话说，我想这样设置结果：

<h:link outcome="getOverviewURI()"
        title="Overview">
            <div>...</div>
</h:link>

getOverviewURI() 是返回字符串 URI 的函数：

function getOverviewURI() {
    let URI = '/overview.xhtml?phone=';
    URI += MobileMatcher.isMobile() ? "true" : "false";
    return URI;
}

但是h:link 需要一个实际的字符串并忽略 JavaScript 函数调用。我尝试在函数调用结束时使用分号，这使链接显示一个无法解析地址的警告。我还尝试在那里使用纯 JS 和 "javascript:getOverviewURI()"，它应该与 <a href="..."> 标签一起使用，我还尝试直接更改 DOM 元素的属性，但它嵌套很深，我似乎无法重写它。

Answer 1

您无法从 javascript 函数中获得 h:link 的结果，因为 JSF 总是呈现服务器端，并且会尝试解析服务器端在呈现标记“a”的属性 href 上放置的内容。如果您需要动态结果，那么函数“getOverviewURI()”应该尽可能成为支持 bean 上的方法。

或者，如果您只想导航，您可以使用“onclick”事件进行以下更改：

<h:link onclick="getOverviewURI()"
        title="Overview">
            <div>...</div>
</h:link>

function getOverviewURI() {
    let URI = window.location.hostname +'/overview.xhtml?phone=';
    URI += MobileMatcher.isMobile() ? "true" : "false";
    window.location.href =URI;
}

注意使用 js 导航 jsf 应用程序存在一些缺点，例如不更新回 bean。