关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
2013-12-13 00:22
1046 查看
在有Struts部署的Java EE环境中,我们一般把jsp页面写在WebRoot\WEB-INF\content 目录下,这样使得jsp页面一定需要struts的控制转发才可访问,提高页面安全性。
但是今天在jsp页面中应用WebRoot目录中的css,js文件发现十分困难,先看看我的文件结构:
目标是在index.jsp中访问default.css。
defautl.css是在index.jsp目录的父目录的父目录的CSS目录下。所以我这样写:
ps:空格为故意添加,不知为何会自动变成博客园的网址
复制代码
在Eclipes中也出现超链接提示,说明目录正确,但是结果失败。
查询资料后,在百度百科中看到:
http://baike.baidu.com/view/1745468.htm
TomCat 服务器下的WEB-INF文件夹是一个非常安全的文件,在页面中不能直接访问其中的文件,必须通过web.xml文件对要访问的文件进行相应映射才能访问。
从上面的实验可以看出,不但是直接访问,使用" ../ ../ "之类的间接访问也不能成功。
在此多方查询资料之后,尝试使用如下方法访问:
复制代码
原理很简单,变量path值为项目根目录,而css就是此目录的子目录,自然可以访问。
可惜结果还是错,思考之,el表达式的${}是以page,request,session,application的顺序寻找匹配的项,而path并不在这个范围之内,也许在java脚本中直接定义的对象是局部作用域,而不是page作用域?可惜百度之后难以找到相关资料,不过结论应该是没错的。
既然EL表达式无法取出,那么java脚本应该可以达到目的吧?尝试如下:
复制代码
果不其然,页面成功读出了css文件中的样式,达到目的。不过此页面中存在java脚本,不够规范,查询资料后,用以下纯EL表达式实现:
复制代码
先将ContextPath放如page中,再使用el表达式取出,问题得以解决。
但是今天在jsp页面中应用WebRoot目录中的css,js文件发现十分困难,先看看我的文件结构:
目标是在index.jsp中访问default.css。
defautl.css是在index.jsp目录的父目录的父目录的CSS目录下。所以我这样写:
ps:空格为故意添加,不知为何会自动变成博客园的网址
<link href="../ ../css/default.css" rel="stylesheet" type="text/css"/> <link href="../ ../css/uploadify.css" rel="stylesheet" type="text/css"/>
复制代码
在Eclipes中也出现超链接提示,说明目录正确,但是结果失败。
查询资料后,在百度百科中看到:
http://baike.baidu.com/view/1745468.htm
TomCat 服务器下的WEB-INF文件夹是一个非常安全的文件,在页面中不能直接访问其中的文件,必须通过web.xml文件对要访问的文件进行相应映射才能访问。
从上面的实验可以看出,不但是直接访问,使用" ../ ../ "之类的间接访问也不能成功。
在此多方查询资料之后,尝试使用如下方法访问:
1 <!-- 输出为项目根目录,即WebRoot --> 2 <%String path = request.getContextPath(); %> 3 <link href="${path}/css/default.css" rel="stylesheet" type="text/css"/> 4 <link href="${path}/css/uploadify.css" rel="stylesheet" type="text/css"/>
复制代码
原理很简单,变量path值为项目根目录,而css就是此目录的子目录,自然可以访问。
可惜结果还是错,思考之,el表达式的${}是以page,request,session,application的顺序寻找匹配的项,而path并不在这个范围之内,也许在java脚本中直接定义的对象是局部作用域,而不是page作用域?可惜百度之后难以找到相关资料,不过结论应该是没错的。
既然EL表达式无法取出,那么java脚本应该可以达到目的吧?尝试如下:
1 <%String path = request.getContextPath(); %> 2 <link href="<%=path %>/css/default.css" rel="stylesheet" type="text/css"/> 3 <link href="<%=path %>/css/uploadify.css" rel="stylesheet" type="text/css"/>
复制代码
果不其然,页面成功读出了css文件中的样式,达到目的。不过此页面中存在java脚本,不够规范,查询资料后,用以下纯EL表达式实现:
1 <c:set value="${pageContext.request.contextPath}" var="path" scope="page"/> 2 <link href="${path}/css/default.css" rel="stylesheet" type="text/css"/> 3 <link href="${path}/css/uploadify.css" rel="stylesheet" type="text/css"/>
复制代码
先将ContextPath放如page中,再使用el表达式取出,问题得以解决。
相关文章推荐
- 神奇的CSS3按钮特效
- CSS三栏布局——中间固定两边自适应宽度
- Css框架选择---渴切(ThinkCss)
- 如何使用js操作css属性
- CSS3 Gradient
- JS+CSS写的类似转盘的抽奖程序
- css3 翻牌效果
- css中font的简写方法(包括粗细、大小、行高、字体)
- 关于文字超出用省略号显示text-overflow:ellipsis
- css断句 word-break
- CSS 颜色代码
- CSS3-Flexbox
- 常用的CSS代码片段+解读(系列)
- LessCSS简述
- css中font的简写方法(包括font-weight,font-size,line-height,font-family)
- 做前端css/div布局的总结
- CSS2.0的圆角制作
- MFC 自定义光标样式
- css兼容问题
- html/CSS弹出式效果代码分析学习-我的各种站点足迹