用 html 的 base 标签，解决静态资源、请求的相对路径问题

最新推荐文章于 2023-11-15 00:04:00 发布

原创最新推荐文章于 2023-11-15 00:04:00 发布 · 7.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #jsp #string #path #ajax #css

本文讨论了Web应用中静态资源加载时遇到的问题，包括如何正确引用资源文件及解决资源路径解析不一致的问题。通过引入上下文路径变量和使用JSTL库简化资源路径配置，提供了解决方案并介绍了在不同场景下应用此解决方案的方法。

问题描述：

项目的静态资源文件放在 webapp/resources/目录，有一个jsp 存放在 webapp/something/test.jsp,

在jsp里引用js、css等资源文件，用相对路径的写法是

<script type='text/javascript' src='resources/js/jquery-1.7.1.js'></script>

我把应用发布在app目录下。正常的访问路径应该是:http://localhost:8080/app/resources/js/jquery-1.7.1.js.

在请求这个不在应用根目录下的jsp时: http://localhost:8080/app/something/test.jsp,这个js的地址被解析成：

http://localhost:8080/app/something/resources/js/jquery-1.7.1.js,无法加载。

如果加上“/”，用绝对路径的写法：

<script type='text/javascript' src='/resources/js/jquery-1.7.1.js'></script>

js的地址被解析成：

http://localhost:8080/something/resources/js/jquery-1.7.1.js,同样无法加载。

解决办法之一：

这时，我们会在jsp里加上

<script type='text/javascript' src='<%=request.getContextPath()%>/resources/js/jquery-1.7.1.js'></script>

再访问http://localhost:8080/app/resources/js/jquery-1.7.1.js。正常。

还可以用jtsl：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script type='text/javascript' src=<c:url value="/resources/js/jquery-1.7.1.js"/>></script>

但是，如果用ajax的方式加载一个html(这个html本身引用了一些静态资源)，或者在js里调用一些请求，都需要在请求前加上这个contextpath，很烦人，也很麻烦。

优雅的解决办法：

在<head>下，加上：

<head>
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
<base href="<%=basePath%>"/>

然后把所有请求、引用资源的地方，直接使用相对路径即可。

<script type='text/javascript' src='resources/js/jquery-1.7.1.js'></script>