解决/WEB-INF目录下的jsp页面引入webRoot下的Js、css和图片的问题

众所周知，通常把jsp页面放在webRoot的/WEB-INF下可以防止访问者直接输入页面，而不经过struts处理请求的恶意操作（当把页面直接放在webRoot下时）。而webRoot的/WEB-INF下的页面是受保护的，用户无法通过形如http://localhost:8080/test/webRoot/WEB-INF/content/xx.jsp来访问，他们的访问都必须透过struts处理请求才能达到。

然而，当把页面放在/web-inf下面时，JSP页面还是避免不了跟“外部”的js,css,图片“交互”，因为需要引入一些webRoot/css, webRoot/js, webRoot/images，而此时很容易引入失败，一般来说，此时用相对路径行不通了，所以必须使用绝对路径！下面一一总结。

 

一、引入webRoot/css

<link href="<%=request.getContextPath()%>/css/default.css" rel="stylesheet" type="text/css"/>

 这个<%=request.getContextPath()%>即为/hh_test(项目名称)，而<%=request.getContextPath()%>/css则相当于用绝对路径直接定位到了webRoot/css.

 

二、引入webRoot/js

<script type="text/javascript"  language="javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.4.min.js"></script>

 

三、引入webRoot/images

<img src="<%=request.getContextPath()%>/images/4.gif"  alt="加载外部图片" />

 

 

四、当透过引入独立的js加载webRoot/images下的图片

这时候由于独立的js文件中无法使用<%=request.getContextPath()%>获得项目的根路径时，此时还必须在独立的js文件中写一段Js代码读取项目跟路径：

            //获取当前网址，如： http://localhost:8088/test/test.jsp  
	    var curPath=window.document.location.href;  
	    //获取主机地址之后的目录，如： test/test.jsp  
	    var pathName=window.document.location.pathname;  
	    var pos=curPath.indexOf(pathName);  
	    //获取主机地址，如： http://localhost:8088  
	    var localhostPaht=curPath.substring(0,pos);  
	    //获取带"/"的项目名，如：/test  
	    var root=pathName.substring(0,pathName.substr(1).indexOf('/')+1);  

 然后再读取该图片文件的目录：

 

var path = root + "images/4.gif";

 

 五、iframe中引入web-inf下的jsp页面

通常，

<iframe name="headerFrame" id="headerFrame" style="height: 100%; visibility: inherit; width: 100%; z-index: 2"  scrolling="no" frameborder="0" src="xx.jsp"></iframe>

引入xx.jsp页面到该iframe中时，放在/webRoot下才能直接引入，而此时在web-inf下，无法直接引入，所以需要改成src="Test!.xxx.action"，然后再在响应的action中写响应的逻辑视图，并在struts.xml中配置响应的xx.jsp，即还是得通过struts处理请求才能响应页面！

 

小结：最好把jsp页面放在/WEB-INF下，而jsp页面引入"外部”js,css,images时，必须获取项目的根路径，再加上/css(或/js 或/images)即使用绝对路径的方法，而不是相对路径的方法，才能访问到放置在webRoot下的资源！