如何通过 h:outputScript 包含 JavaScript 文件？ [复制]

Posted 2023-02-23

【中文标题】如何通过 h:outputScript 包含 JavaScript 文件？ [复制]

【英文标题】：How to include JavaScript files by h:outputScript? [duplicate]

【发布时间】：2012-02-23 23:14:31

【问题描述】：

我想使用带有 JSF 的 jQuery Validate 插件进行客户端表单验证。我发现导入资源的基本困难。

在我的 JSF 页面中

<h:outputScript library="js" name="jquery-1.6.2.js"></h:outputScript>
<h:outputScript library="js" name="jquery.validate.js"></h:outputScript>
<h:outputScript library="js" name="jquery.maskedinput.js"></h:outputScript>
<h:outputScript library="js" name="myapp.validate.js"></h:outputScript>

当我单击 Firefox 中的脚本选项卡时，我在下拉列表中看不到任何脚本文件。显示一条消息：

如果标签有“type”属性，它应该等于“text/javascript”或“application/javascript”。脚本也必须是可解析的（语法正确）。

我的 jquery 效果如鼠标悬停、隐藏、显示等不起作用。我尝试使用通常的脚本标签

<script type="text/javascript" src="../js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/jquery.maskedinput.js"></script>
<script type="text/javascript" src="../js/myapp.validate.js"></script>

这没有用。仍然无法找到我的 JS 文件。我所有的 JS 文件都放在

下

   Web pages
       |_ js
           |_jquery-1.6.2.js,my.validate.js,jquery.validate.js,jquery.maskedinput.js

我尝试了Using jQuery with JSF 2.0's resource 发布的解决方案之一，但没有成功。

请为此建议我一个解决方案。我不想在 ajax 中使用 JSF 内置验证，因为我们将代码从 JSP 移动到 JSF 并且验证已经编写完毕。我想重用我之前编写的现有 jQuery Validation。

【参考方案1】：

<h:outputScript>（和<h:outputStylesheet>）从/resources 文件夹加载资源。您需要将脚本放在该文件夹中。

WebContent
|-- resources
|    `-- js
|        |-- jquery-1.6.2.js
|        |-- myapp.validate.js
|        |-- jquery.validate.js
|        `-- jquery.maskedinput.js
|-- WEB-INF
:

那么下面的脚本声明应该可以工作：

<h:outputScript name="js/jquery-1.6.2.js" />
<h:outputScript name="js/jquery.validate.js" />
<h:outputScript name="js/jquery.maskedinput.js" />
<h:outputScript name="js/myapp.validate.js" />

（注意我省略了library 属性，因为名称“js”并不表示real library）

您的<script> 方法失败可能是由于使用了不正确的相对路径。您需要意识到资源是相对于当前请求 URL 而不是相对于它们在服务器端磁盘文件系统中的路径进行解析的。

【讨论】：

@BalusC-所以它会自动在资源文件夹下查找？如果是这样，这是否意味着我必须将我的网页内容——css、图像等放在资源下？？？这是在netbeans中设置的std文件夹结构吗？？

这就是文档所说的，是的。不，这与 Netbeans 完全无关。它只是一个工具。

@BalusC 您说您省略了 library 属性，因为它并不表示真正的库。你到底是什么意思？可以使用哪些名称？库不是和resources下的文件夹名对应吗？

@user：“资源库”应该表示所有这些资源所属的公共主题/皮肤/模块，甚至可以嵌入到 /WEB-INF/lib 中的 JAR 文件中。这也允许您进行适当的库版本管理。至于名字，你自己选就行了。 JSF 使用“javax.faces”，PrimeFaces 使用“primefaces”，OmniFaces 使用“omnifaces”等。另见：***.com/questions/9929417、***.com/questions/10362942 和 ***.com/questions/8320486

@BalusC 谢谢，但我不明白。在资源下应该只有一个文件夹（common、javax.faces、primefaces、omnifaces），而在那个 css、js 等下面？我目前在资源下直接有 css 和 js，我可以将 library="css" 与 outputStylesheet 一起使用，但 library="js" 似乎不适用于 outputScript。