可能在head / head节中具有样式类和脚本功能,其中样式类和脚本功能是在另一个xhtml文件中包含的xhtml文件中定义的。这里是一个例子:
File template.xhtml
<h:body>
<ui:insert name="content" >
Template content
</ui:insert>
</h:body>
文件content.xhtml
<ui:composition template="template.xhtml">
<h:outputScript target="head">
function contentJS()
{
}
</h:outputScript>
<ui:define name="content">
<ui:include src="subcontent.xhtml"/>
</ui:define>
</ui:composition>
File subcontent.xhtml
<ui:composition ...>
<h:outputScript target="head">
function subcontentJS()
{
}
</h:outputScript>
<style>
.mystyleclass {color:red}
</style>
<div class="mystyleclass">Text color red</div>
</ui:composition>
在结果xhtml中,我只有一个javascript函数,而没有两个javascript函数(contentJS和subcontentJS),而mystyleclass不在头部。
您的标记中有两个问题:
定义h:outputScript
的contentJS
块不在一个块内,因此未合并到呈现的输出中。
style
是一个简单的html元素,未放置在head
中,而是直接呈现。将此更改为h:outputStylesheet target="head"
。
template.xhtml:
<!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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head />
<h:body>
<ui:insert name="content">
Template content
</ui:insert>
</h:body>
</html>
content.xhtml:
<!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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head />
<h:body>
<ui:composition template="template.xhtml">
<ui:define name="content">
<h:outputScript target="head">
function contentJS()
{
}
</h:outputScript>
<ui:include src="subcontent.xhtml" />
</ui:define>
</ui:composition>
</h:body>
</html>
subcontent.xhtml:
<!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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head />
<h:body>
<ui:composition>
<h:outputScript target="head">
function subcontentJS()
{
}
</h:outputScript>
<h:outputStylesheet target="head">
.mystyleclass {
color: red
}
</h:outputStylesheet>
<div class="mystyleclass">Text color red</div>
</ui:composition>
</h:body>
</html>