修复重写URL时脚本/ CSS的相对路径问题

Question

修复重写URL时脚本/ CSS的相对路径问题

javajsf-2url-rewritingprettyfaces

3

我正在使用JSF2.1和RichFaces 4.1在JBoss AS 6.1.0.Final上工作。现在，我专注于重新编写URL。尝试了不同的方法后，我决定坚持使用PrettyFaces，因为它非常直观易用（并且在几分钟内就能让它运行）。

然而还有个问题，脚本/ css的相对链接出现混乱，因为URL已更改，而相对路径最终以404结束。我可以使用绝对路径，但这将强制我更改很多页面，并在页面源代码中公开应用程序的结构。

我在考虑一个临时解决方法：把处理这些相对链接的不同层级的责任交给后备bean，但重复使用bean使这成为一个微妙的问题。

我的问题是，在重新编写URL时，是否有明确定义的方法或最佳实践来管理这些相对路径？

编辑：

h: outputStylesheet和h: outputScript效果很好。剩下的问题是解决相对方式引用图像的CSS的小问题。看一下这个结构：

-------/resources
       |
       ---_img
       |
       ---_css
       |
       ---_js

在文件夹_css中的CSS文件使用相对路径../_img/image1.png引用位于_img文件夹中的图像image1.png。问题是，它会导致404错误，因为它无法在/myApp/javax.faces.resource/_img/image1.png中找到该图像。

将CSS中每个../更改为#{request.contextPath}/resources似乎可以很好地解决问题，但我想知道是否有更好的方法。相对路径的方法不起作用对我来说很奇怪。

- Fritz

2个回答

2

您需要使用绝对URL来引用CSS文件，例如：

/path/to/style.css

改为：

../style.css

您还希望避免硬编码URL，如果可能的话，请使用JSF2资源重定位功能：<h:outputStylesheet>和<h:outputScript>。以下链接可能会对您有所帮助：http://ocpsoft.org/support/topic/problem-with-prettyfaces-and-primefaces。

- Lincoln

谢谢您的回答！顺便说一句，PrettyFaces 做得很好。直观易用，容易上手。继续保持！ :) - Fritz

谢谢！我很高兴你喜欢它。我们正在尝试继续改进它（使用 http://ocpsoft.org/rewrite/ 作为4.0版本的核心 :)）。 - Lincoln

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BalusC · Accepted Answer

首先，我不明白它们是如何以及为什么被搞乱的。你没有说明清楚。很可能你已经硬编码了纯HTML <script> 和 <link> (以及 <img>) 元素，而没有使用JSF提供的<h:outputScript> 和 <h:outputStylesheet> (以及 <h:graphicImage>) 组件。这些JSF组件可以接受与 /resources 文件夹相对应的资源名称，并自动添加上上下文路径，使其成为一个基于域的URL（带有前导斜杠），而不是请求相关的URL（没有前导斜杠）。

给定以下文件夹结构（/resources 文件夹名称是预定义的；您无法更改其名称）：

WebContent
 |-- resources
 |    |-- css
 |    |    `-- style.css
 |    |-- img
 |    |    `-- logo.png
 |    `-- js
 |         `-- script.js
 |-- page.xhtml
 :

那么你应该能够让JSF自动生成正确的<script>，<link>（和<img>）元素，如下所示：

<h:head>
    <h:outputStylesheet name="css/style.css" />
    <h:outputScript name="js/script.js" />
</h:head>
<h:body>
    <h:graphicImage name="img/logo.png" />
</h:body>

参见：

如何在Facelets模板中引用CSS/JS/图像资源？
JSF 2规范 - 第2.6章资源处理