WEB-INF目录下的jsp访问外部的css,js等配置文件
- 1、项目目录结构：
- 2、解决方案
- 2.1 EL表达式实现
- 2.2 设置base标签
- 2.3 实现效果
- 3、总结
- 3.1 ${pageContext.request.contextPath}
- 3.2 base标签
1、项目目录结构：
我现在要在404.jsp页面访问webapp/commons目录下面的css和js
2、解决方案
2.1 EL表达式实现
jsp文件头部加上
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false" %>
使用EL表达式获取项目路径，引用在原路径前面，即可成功访问。
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>完整头部如下：
<title>404页面</title>
<meta name="keywords" content="404">
<meta name="description" content="404">
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<c:set value="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}" var="serverPath"/>
<link rel="shortcut icon" href="${path}/commons/favicon.ico">
<link href="${path}/commons/jslib/hplus/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${path}/commons/jslib/hplus/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="${path}/commons/jslib/hplus/css/animate.min.css" rel="stylesheet">
<link href="${path}/commons/jslib/hplus/css/style.css?v=4.1.0" rel="stylesheet">
<!-- 全局js -->
<script src="${path}/commons/jslib/hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="${path}/commons/jslib/hplus/js/bootstrap.min.js?v=3.3.6"></script>
2.2 设置base标签
<base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/" />这样设置之后，所有的路径都可以使用相对路径(注意下和第一种在路径上卖弄的区别)
<base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/" />
<link rel="shortcut icon" href="commons/favicon.ico">
<link href="commons/jslib/hplus/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="commons/jslib/hplus/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="commons/jslib/hplus/css/animate.min.css" rel="stylesheet">
<link href="commons/jslib/hplus/css/style.css?v=4.1.0" rel="stylesheet">
<!-- 全局js -->
<script src="commons/jslib/hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="commons/jslib/hplus/js/bootstrap.min.js?v=3.3.6"></script>2.3 实现效果
可以看到自定义的404页面样式已经生效。
3、总结
3.1 ${pageContext.request.contextPath}
${pageContext.request.contextPath}是JSP取得绝对路径的方法，等价于<%=request.getContextPath()%> 。也就是取出部署的应用程序名或者是当前的项目名称
3.2 base标签
base 元素可规定页面中所有链接的基准 URL
默认情况下，页面中的链接（包括样式表、脚本和图像的地址）都是相对于当前页面的地址(即:浏览器地址栏里的请求URL)。
我们可以使用 标签中的href属性来设置，所有的“相对基准 URL”。
