Javascript 在 JSF 模板下不起作用答案

【问题标题】：Javascript does not work under JSF templateJavascript 在 JSF 模板下不起作用
【发布时间】：2012-06-14 05:43:36
【问题描述】：

我正在使用 JSF 模板和 Primefaces。

Javascript 代码似乎无法在 ui:composition 和 ui:define 标签下运行。以下代码没有命中loaded() 方法。这是 content.xhtml 文件

<h:head>
<script language="javascript">
    function loaded() {
        alert("Working!!");
    }
</script>
</h:head>

<ui:composition template="/template/template.xhtml">
<ui:define name="content">
<h:body style="width:100%;height:100%;" onload="loaded()">
     <p class="item">Random text</p>
</h:body>
</ui:define>
</ui:composition>

但是当我删除定义和组合标签时，加载的函数被调用。知道为什么会这样吗？

这是模板文件

<!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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">


<h:head>
<title><ui:insert name="title">Template</ui:insert></title>
</h:head>

<h:body>

<div id="header">
    <ui:insert name="header">
        <ui:include src="../menu.xhtml" />
    </ui:insert>
</div>


<div id="content">
    <ui:insert name="content">
        <ui:include src="../content.xhtml" />
    </ui:insert>
</div>

<div id="footer">
    <ui:insert name="footer">
        This is a footer
    </ui:insert>
</div>

【问题讨论】：

查看两种情况下生成的 HTML 的差异
好主意 :) ... 刚刚检查了一下，似乎 load() 方法没有被添加到输出 html 中。

标签： javascript html jsf jsf-2 facelets

【解决方案1】：

外部<ui:composition> 的所有内容在构建视图期间忽略。此外，没有必要再次重新声明<h:body>。要使用在页面加载期间运行的脚本，最好使用<h:outputScript target="body">。这将被重新定位到正文的末尾，因此在构建必要的 HTML DOM 元素之后被调用。这也比onload 快一些。

总而言之，您的整个 content.xhtml 必须如下所示：

<ui:composition template="/template/template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
>
    <ui:define name="content">
        <h:outputScript target="body">
            alert("Working!!");
        </h:outputScript>

        <p class="item">Random text</p>
    </ui:define>
</ui:composition>

另见：

How to include another XHTML in XHTML using JSF 2.0 Facelets?

【讨论】：

太棒了！那行得通。谢谢一堆 BalusC ...您是 Stackoverflow 上的超级英雄。再次感谢:)

【解决方案2】：

您正在将“内容”传递给模板。如果您的模板不包含“内容”，则它不会包含在生成的 HTML 中。

发布template.xhtml，让我们看看...

【讨论】：

Steve 我已经编辑了问题并添加了 template.xhtml 文件