通过 h:outputScript 包含带有资源的 javascript

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15926901/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 02:38:09  来源:igfitidea点击:

Include javascript with resources via h:outputScript

javascriptjsfjscolor

提问by Petr Du?ek

I would like to include JScolor to my jsf application. It is possible via <script>tag, but I mean it is more system via <h:outputScript>.

我想将 JScolor 包含到我的 jsf 应用程序中。可以通过<script>标签,但我的意思是通过<h:outputScript>.

However it is not working with resources. JSColor includes one js file and some picture files - it seems like the js file is included and the reousrces not.

但是,它不适用于资源。JSColor 包含一个 js 文件和一些图片文件 - 似乎包含 js 文件而没有包含资源。

Could anybody tell me why? And how to solve this?

谁能告诉我为什么?以及如何解决这个问题?

Thank you.

谢谢你。

回答by BalusC

The JS file is apparently referencing picture files via a relative path which do not represent a valid JSF resource URL.

JS 文件显然是通过不代表有效 JSF 资源 URL 的相对路径引用图片文件。

The <h:outputScript>generates a JSF resource URL which goes through the JSF resource handler which worries about among others automatic localization and versioning. It would generate an URL prefixed with /javax.faces.resourceand also append the currently used FacesServletURL mapping such as *.xhtmlor /faces/*.

<h:outputScript>生成经过这些担心在其他自动定位和版本的JSF资源处理程序JSF资源URL。它会生成一个前缀为 的 URL/javax.faces.resource并附加当前使用的FacesServletURL 映射,例如*.xhtml/faces/*

Thus, if you mapped the faces servlet on *.xhtmland have a /resources/jscolorfolder with the JS and image files and have referenced the JS file as follows,

因此,如果您将 faces servlet 映射到*.xhtml并有一个/resources/jscolor包含 JS 和图像文件的文件夹,并按如下方式引用了 JS 文件,

<h:outputScript name="jscolor/jscolor.js" />

then it would generate

那么它会产生

<script type="text/javascript" src="/context/javax.faces.resource/jscolor/jscolor.js.xhtml"></script>

However, the image files are not physically available in /javax.faces.resource/jscolorfolder, instead they are physically available in /resources/jscolorfolder. The /javax.faces.resourcewould only be automatically resolved when you apply the faces servlet mapping on the resource name. Thus, this specific case would only work if you manually edit the jscolor.jsfile to change image file names from e.g. arrow.gifto arrow.gif.xhtml.

但是,图像文件在/javax.faces.resource/jscolor文件夹中并不物理可用,而是在文件夹中物理可用/resources/jscolor。该/javax.faces.resource会只有当你申请的资源名称的面孔servlet映射可以自动解决。因此,这种特殊情况只有在您手动编辑jscolor.js文件以将图像文件名从 eg 更改arrow.gifarrow.gif.xhtml.

If you don't utilize any automatic localization or versioning features of the JSF resource resolver, nor are using any special custom resource resolvers which requires real JSF resources rather than static HTML elements, such as this one, then you can also just go ahead with a plain vanilla HTML <script>element instead of a <h:outputScript>.

如果您不使用 JSF 资源解析器的任何自动本地化或版本控制功能,也不使用任何需要真实 JSF 资源而不是静态 HTML 元素的特殊自定义资源解析器,例如这个,那么您也可以继续使用一个普通的普通 HTML<script>元素而不是<h:outputScript>.

<script type="text/javascript" src="#{request.contextPath}/resources/jscolor/jscolor.js"></script>

回答by azendh

I may misunderstand your question, but this snippet will help:

我可能会误解你的问题,但这个片段会有所帮助:

<script
    type="text/javascript"
    src="#{facesContext.externalContext.requestContextPath}/path/on/WebContent/foo.js"></script>

I regularly use this kind of java resource include, instead of the <h:outputScript>

我经常使用这种java资源包含,而不是 <h:outputScript>

回答by user3755197

Suppose your js file's path (file named jquery.js) into resources/jsfolder like that:

假设您的 js 文件的路径(名为 jquery.js 的文件)进入这样的resources/js文件夹:

resources/js/jquery.js

Then you have to write:

然后你必须写:

<h:outputScript name="./js/jquery.js"  target="body"/>

PS. Pay attention on attribute target (eg head, body)

附注。注意属性目标(例如头部,身体)

回答by John Quiroga C

add in web.xml

在 web.xml 中添加

<servlet-mapping>
  <servlet-name>Resource Servlet</servlet-name>
  <url-pattern>/resources/*</url-pattern>
</servlet-mapping>