引用外部.css或.js檔案的路徑問題
jsp或html頁面引用外部.css或.js檔案時,注意路勁問題,如果設定不當,會引用不到這些外部的檔案 假設使用下面的目錄結構:
-webapp |-MyProject 目錄 |--WebContent 目錄 |---scripts 目錄 ---dtree.js 檔案 |---styles 目錄 ---main.css 檔案 |---pages 目錄 ---test.jsp 檔案 現在例如要在test.jsp中引用scripts目錄下的dtree.js和styles目錄下的main.css 有如下幾種方法: 1.使用相對於jsp頁面的相對路徑
- <link type="text/css" rel="stylesheet" href="../styles/main.css" />
- <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。 2.使用相對於Web工程的相對路徑
- <link type="text/css" rel="stylesheet" href="styles/main.css" />
- <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> 但是請注意:使用方法2這種方式引用,如果直接訪問http://localhost:8080/MyProject/test.jsp,是引用不到的。 3.使用Web工程的絕對路徑 方法1和方法2都有缺點,都只適用一種情況,有沒有兩種情況都適用的呢?答案肯定的! 我們使用絕對路徑: Html程式碼 [url=http://javatechnology.javaeye.com/blog/577469#][/url]
- <link type="text/css" rel="stylesheet" href="/MyProject/styles/main.css" />
- <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,這種情況在引用時就不能帶工程名了,應該這樣: Html程式碼 [url=http://javatechnology.javaeye.com/blog/577469#][/url]
- <link type="text/css" rel="stylesheet" href="/styles/main.css" />
- <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>