如何在 RichFaces/JSF 页面中嵌入和调用 javascript 脚本

Question

我一直在寻找一种在 JSF 页面中嵌入和调用 javascript 函数的方法。我也在使用 RichFaces。

要定义函数，看来我可以以跨浏览器支持的方式执行此操作：

        <a4j:outputPanel ajaxRendered="true">
        <f:verbatim>
            <script type="text/javascript">
                function datum() {
                    alert("hi");
                }
            </script>
        </f:verbatim>
    </a4j:outputPanel>

但我不确定如何在页面加载时调用此函数，因此它返回的文本嵌入在 h:outputPanel 中。计划是在提供给客户端的页面中嵌入一个 js 时钟。请注意，我没有使用 body 标签，我使用的是 facelets ui:composition、f:view（核心）和 RF RI rich:page。

谢谢

Answer 1

无论您使用何种类型的服务器端标签，当您的页面到达浏览器时，一切都已不复存在，而只是 HTML。 （至少，最好是这样，否则无论如何都行不通。）您需要做的是安排您的代码由“加载”事件处理程序调用。有多种方法可以做到这一点，但最简单的是：

 <f:verbatim>
     <script type="text/javascript">
        window.onload = function() {
            alert("hi");
        }
    </script>
</f:verbatim>

现在关于初始化页面的另一部分，同样重要的是最终在 HTML 中的内容。您需要安排某种 HTML 容器（<div> 或其他东西，具体取决于您的页面设计），并且您会希望它具有唯一的“id”属性。然后，您的 Javascript 可以使用“id”来查找元素并设置其内容：

    var elem = document.getElementById("whatever");
    elem.innerHTML = // ... whatever ;

您可能会在“加载”函数中执行这些操作。

此外，如果您使用 Facelets 而不是 JSP，这是一种基于 XML 的视图技术，如果您的 JavaScript 包含 cmets // 或诸如 、&& 等文字，则需要添加 XML CDATA 部分分隔符，等等。下面是带有 XML CDATA 分隔符的示例：

 <f:verbatim>
     <script type="text/javascript">
     //<![CDATA[
        //Comments won't show error now.
        window.onload = function() {
            alert("hi");
        }
    //]]>
    </script>
</f:verbatim>

您可以查看when to use CDATA here. 的详细说明，如果您正在创建 HTML5 页面，则不需要这些说明。

编码愉快！