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

举报
别团等shy哥发育 发表于 2023/02/04 17:02:58 2023/02/04
【摘要】 @toc 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表达式获取项目路径,引用在原路径...

@toc

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)。
我们可以使用 <base>标签中的href属性来设置,所有的“相对基准 URL”。

参考链接:https://blog.csdn.net/weixin_44679651/article/details/105791247

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。