Question

我通过谷歌搜索了可能的一组选项，并尝试在head部分中包含我的'js'和'css'，但是当我执行页面源代码时，css和js文件正在追加到{{1以下是我的代码片段：

body

并输出如下： enter image description here

以下是完整的代码：模板：

<h:head profile="http://www.w3.org/2005/10/profile">
        <META charset="UTF-8" lang="en-US" />

        <link rel="icon" type="image/png"
            href="#{resource['image:Friendsmirror.ico']}" />
        <script type="text/javascript"
            src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery-ui.min.js" />
etc......
</h:head>

并使用模板：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    lang="#{languageBean.language}">
<!-- Enables CTRL+SHIFT+D for activating Facelets debug window -->
<ui:debug />

<f:view locale="#{languageBean.language}">

    <f:loadBundle var="messageResource" basename="MessageResource" />

    <h:head profile="http://www.w3.org/2005/10/profile">
        <META charset="UTF-8"/>

        <link rel="icon" type="image/png"
            href="#{resource['image:Friendsmirror.ico']}" />
        <script type="text/javascript"
            src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery-ui.min.js" />
        <script type="text/javascript"
            src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.tooltipster.min.js" />
        <script type="text/javascript"
            src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.tokeninput.js" />
        <!--  <script type="text/javascript"
            src="#{facesContext.externalContext.requestContextPath}/resources/js/connect_dashboard.js?some_var_to_bust_cache=24312341" />-->
        <script type="text/javascript"
            src="#{facesContext.externalContext.requestContextPath}/resources/js/moment.js" />
        <script type="text/javascript"
            src="#{facesContext.externalContext.requestContextPath}/resources/js/livestamp.js" />
        <script type="text/javascript"
            src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.watermark.min.js" />
        <script type="text/javascript"
            src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.jeditable.mini.js" />
        <script type="text/javascript"
            src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.autocomplete.js" />
        <!-- For Input Range and Overlay -->
        <script type="text/javascript"
            src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.tools.min.js" />
        <!-- slimScroll plugin -->
        <script type="text/javascript"
            src="#{facesContext.externalContext.requestContextPath}/resources/js/jquery.slimscroll.min.js" />

        <link rel="stylesheet" type="text/css"
            href="#{facesContext.externalContext.requestContextPath}/resources/css/main.css?some_var_to_bust_cache=24312340" />
        <link rel="stylesheet" type="text/css"
            href="#{facesContext.externalContext.requestContextPath}/resources/css/common.css?some_var_to_bust_cache=24312342" />
        <link rel="stylesheet" type="text/css"
            href="#{facesContext.externalContext.requestContextPath}/resources/css/connect.css?some_var_to_bust_cache=24312340" />
        <link rel="stylesheet" type="text/css"
            href="#{facesContext.externalContext.requestContextPath}/resources/css/token-input-facebook.css?some_var_to_bust_cache=24312345" />
        <link rel="stylesheet" type="text/css"
            href="#{facesContext.externalContext.requestContextPath}/resources/css/tooltipster.css?some_var_to_bust_cache=24312340" />
        <link rel="stylesheet" type="text/css"
            href="#{facesContext.externalContext.requestContextPath}/resources/css/skilltimeline.css" />
        <link rel="stylesheet" type="text/css"
            href="#{facesContext.externalContext.requestContextPath}/resources/css/jquery.autocomplete.css" />

        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible"
                content="EmulateIE8,IE=edge,chrome=1" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta http-equiv="pragma" content="no-cache" />
            <meta http-equiv="cache-control" content="no-cache" />
            <meta http-equiv="expires" content="0" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta name="description" content="Connect" />
            <meta name="keywords"
                content="timeline, 3d, css, css3, css-only, transitions, responsive, fluid" />
            <meta name="author" content="FriendsMirror" />
            <title><ui:insert name="title">#{messageResource['expensecontrol.main.title']}</ui:insert></title>
        </f:facet>

    </h:head>

    <h:body>
          <p:outputPanel styleClass="content">
            <h:outputScript target="head" name="connect_dashboard.js" library="js"/>
            <!--<p:ajaxStatus styleClass="ajaxLoader" id="ajaxStatusPanel">
                <f:facet name="start">
                    <h:graphicImage name="ajax-loader.gif" library="image" />
                </f:facet>
                <f:facet name="complete">
                    <h:outputText value="" />
                </f:facet>
                <f:facet name="error">An error has occurred!</f:facet>
            </p:ajaxStatus>-->
            <ui:insert name="header" />
            <ui:insert name="body" />
        </p:outputPanel>
    </h:body>
</f:view>
</html>

我试过

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    template="/templates/common_layout.xhtml">

    <ui:define name="title">
        Jayaram Pradhan
    </ui:define>
    <ui:define name="header">
        <ui:include src="/templates/connectHome_Banner.xhtml" />
    </ui:define>
    <ui:define name="body">

        <p:panel header="TEST Goes Here">
            <h:form>
                <h:link value="Click Here" outcome="connect">
                    <f:param name="sessionKey" value="1234" />
                </h:link>
            </h:form>
        </p:panel>
    </ui:define>

</ui:composition>

以及<h:outputScript target="head" name="connect_dashboard.js" library="js"/> <h:outputStylesheet/>但仍然只有js或css附加到身体。

JSF在头部加载CSS和JS

0 个答案: