web中src引用文件的路徑問題


在編寫web應用的時候,難免會在一個文件中引用外部的文件,例如樣式表css文件以及一些腳本js文件,這樣做的目的無疑是提高代碼的復用率。但是在引用文件時,一定要引用正確的文件路徑,不然是訪問不到相關文件的。

總結一下,一共有如下幾種方式引用相關文件:

前提:

相關目錄結構:

方法一:使用相對於當前文件(源文件)的相對路徑

 

  1. <link type="text/css" rel="stylesheet" href="../styles/main.css" />    
  2. <script type="text/javascript" src="../scripts/dtree.js"></script>    
<link type="text/css" rel="stylesheet" href="../styles/main.css" />  
<script type="text/javascript" src="../scripts/dtree.js"></script>  

這樣在頁面使用http://localhost:8080/MyProject/test.jsp訪問test.jsp時就可以引用到dtree.js和main.css。

 

方法二:使用相對於web工程的相對路徑

 

  1. <link type="text/css" rel="stylesheet" href="styles/main.css" />    
  2. <script type="text/javascript" src="scripts/dtree.js"></script>    
<link type="text/css" rel="stylesheet" href="styles/main.css" />  
<script type="text/javascript" src="scripts/dtree.js"></script>  

但是如上兩種方法都有其瓶頸,對於方法一中的相對使用相對於於jsp頁面的相對路徑的這種方式,如果我們是設置action跳轉到test.jsp頁面,那么這種使用相對路徑的方式就引用不到了。例如我們當訪問http://localhost:8080/MyProject/main.do的時候,頁面跳轉到test.jsp頁面,如果使用方法1,就引用不到了。如果使用方法2這種方式引用,如果直接訪問http://localhost:8080/MyProject/test.jsp,是引用不到的。

 

那么有沒有一種兩全其美的方法呢,答案是肯定的,也就是我們的方法三:使用web工程的絕對路徑

 

  1. <link type="text/css" rel="stylesheet" href="/MyProject/styles/main.css" />    
  2. <script type="text/javascript" src="/MyProject/scripts/dtree.js"></script>    
<link type="text/css" rel="stylesheet" href="/MyProject/styles/main.css" />  
<script type="text/javascript" src="/MyProject/scripts/dtree.js"></script>  

這樣,不管是通過http://localhost:8080/MyProject/main.do跳轉訪問test.jsp還是直接訪問http://localhost:8080/MyProject/test.jsp,都可以成功引用。 注意:如果我們在部署Web應用時,沒有設置Context Root(一般情況下配置為工程名),也就是IP和端口后面不帶應用名,如http://localhost:8080/main.do和http://localhost:8080/test.jsp,這種情況在引用時就不能帶工程名了,應該這樣:

 

 

  1. <link type="text/css" rel="stylesheet" href="/styles/main.css" />    
  2. <script type="text/javascript" src="/scripts/dtree.js"></script>    
<link type="text/css" rel="stylesheet" href="/styles/main.css" />  
<script type="text/javascript" src="/scripts/dtree.js"></script>  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM