将JS文件包含在使用ui:include包含的xhtml文件中

时间:2011-10-02 16:01:10

标签: javascript jsf jsf-2

我将使用一个例子说明我的问题:

outerfile.xhtml:

<h:head>
    <h:outputScript library="js" name="jquery-1.6.2.js" />
    <h:outputScript library="js" name="outer.js" />
</h:head>

<h:body>
    <h:panelGroup id="inner_panel">
      <ui:include src="innerfile.xhtml" />
    </h:panelGroup>
</h:body>

innerfile.xhtml:

<ui:composition ... >
    <h:head>
        <h:outputScript library="js" name="jquery-1.6.2.js" />
        <h:outputScript library="js" name="inner.js" />
    </h:head>

    <h:body>
        <h:panelGroup>
          I Am Text in The Inner File!
        </h:panelGroup>
    </h:body>
</ui:composition>

我的问题:

  1. 可以像我一样在内部文件中声明js个文件吗?
  2. 我是否需要(并且我应该)在内部文件中再次声明公共(jquery-1.6.2.js)?
  3. 如果我使用AJAX取消渲染并重新渲染inner_panel,会发生什么?是否会重新加载内部包含的标题?

2 个答案:

答案 0 :(得分:13)

  

可以按照我的方式在内部文件中声明js文件吗?

没有。您也不应在include中指定<h:head>。这只会导致无效 HTML。正如您现在所知,将导致:

<html>
  <head>
    <script></script>
  </head>
  <body>
    <head>
      <script></script>
    </head>
    <body>
    </body>
  </body>
</html>

(在浏览器中右键单击页面并执行查看源以自行查看,w3-validate如有必要)

innerfile.xhtml

中相应地修复它
<ui:composition ... >
    <h:outputScript library="js" name="jquery-1.6.2.js" target="head" />
    <h:outputScript library="js" name="inner.js" target="head" />

    <h:panelGroup>
        I Am Text in The Inner File!
    </h:panelGroup>
</ui:composition>

这将产生有效的HTML。 <h:outputScript target="head">声明的脚本将自动结束<head>,如果之前尚未声明的话。与真实HTML一样,整个视图中只应包含一个 <h:head><h:body>,包括任何模板和包含文件。


  

我是否需要(并且我应该)在内部文件中再次声明公共(jquery-1.6.2.js)?

如果父文件已将其声明为<h:outputScript>,则不会。但是在包含中重新声明它并不会造成伤害。如果之前已经宣布过,它将不会重复。


  

如果我使用Ajax取消渲染并重新渲染inner_panel会发生什么?是否会重新加载内部包含的标题?

仅当您不使用target="head"时才有效。它们是否将从服务器重新加载,取决于浏览器之前是否已经请求它并且已经存在并且在浏览器缓存中有效。但基本上,浏览器会再次被告知加载它,是的。使用Firebug,您可以轻松确定它。

答案 1 :(得分:1)

正确的编写方法是在innerfile.xhtml的h:outputScript声明中使用target =“head”:

<ui:composition ... >
    <h:outputScript library="js" target="head" name="jquery-1.6.2.js" />
    <h:outputScript library="js" target="head" name="inner.js" />
    <h:panelGroup>
       I Am Text in The Inner File!
    </h:panelGroup>
</ui:composition>

这样,所有资源声明都将放在外部。具有相同库/资源名称的同一资源的多个声明将不会多次呈现相同的声明,因为h:outputScript的呈现器具有一些检测到它并忽略重复条目的代码。请注意,如果渲染不引用javascript文件的h:outputScript,则情况会有所不同。