WEB-INF目录下的jsp访问外部的css,js等配置文件

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”。