jsp引入js時的絕對路徑和相對路徑
阿新 • • 發佈：2019-01-06
一．問題
JSP中究竟採用絕對路徑還是採用相對路徑隨著所採用技術的越來越複雜，這個問題也變得越來越難以解決。
１）採用相對路徑遇到的問題
l 相對路徑固然比較靈活，但如果想複製頁面內的程式碼卻變得比較困難，因為不同的頁面具有不同的相對路徑，複製後必須修改每一個連線的路徑。
l 如果頁面被多於一個的頁面所包含，那麼被包含頁面中的相對路徑將是不正確的。
l 如果採用Struts的Action返回頁面，那麼由於頁面路徑與Action路徑不同，使得瀏覽器無法正確解釋頁面中的路徑，如頁面為/pages /cust/cust.jsp，圖片所有目錄為/images/title.gif，這時在/pages/cust/cust.jsp中的所用的路徑為”../../images/title.gif”，但是如果某一個Action的Forward指向這個JSP檔案，而這個Action的路徑為 /cust/manage.do，那麼頁面內容中”../../images/title.gif”就不再指向正確的路徑了。
解決以上問題似乎只有使用絕對路徑了。
２）採用絕對路徑遇到的問題
l 隨著不同的Web應用釋出方式，絕對路徑的值也不同。如Web應用釋出為MyApp，則路徑”/MyApp/images/title.gif”是正確的，但釋出為另一應用時如MyApp2，這個路徑就不對了，也許這個情況比較少，但以default方式釋出Web應用時以上絕對路徑也不同：”/images/title.gif”。
二．解決方案
１）採用絕對路徑，但為了解決不同部署方式的差別，在所有非struts標籤的路徑前加${pageContext.request.contextPath}
”/images/title.gif”，改為
“${pageContext.request.contextPath}/images/title.gif”。
程式碼” ${pageContext.request.contextPath}”的作用是取出部署的應用程式名，這樣不管如何部署，所用路徑都是正確的。
缺點：
操作不便，其他工具無法正確解釋${pageContext.request.contextPath}
２） 採用相對路徑，在每個JSP檔案中加入base標籤，如：
這樣所有的路徑都可以使用相對路徑。
缺點：
對於被包含的檔案依然無效。
真正使用時需要靈活應用１）和２），寫出更加健壯的程式碼。
JSP中究竟採用絕對路徑還是採用相對路徑隨著所採用技術的越來越複雜，這個問題也變得越來越難以解決。
１）採用相對路徑遇到的問題
l 相對路徑固然比較靈活，但如果想複製頁面內的程式碼卻變得比較困難，因為不同的頁面具有不同的相對路徑，複製後必須修改每一個連線的路徑。
l 如果頁面被多於一個的頁面所包含，那麼被包含頁面中的相對路徑將是不正確的。
l 如果採用Struts的Action返回頁面，那麼由於頁面路徑與Action路徑不同，使得瀏覽器無法正確解釋頁面中的路徑，如頁面為/pages /cust/cust.jsp，圖片所有目錄為/images/title.gif，這時在/pages/cust/cust.jsp中的所用的路徑為”../../images/title.gif”，但是如果某一個Action的Forward指向這個JSP檔案，而這個Action的路徑為 /cust/manage.do，那麼頁面內容中”../../images/title.gif”就不再指向正確的路徑了。
解決以上問題似乎只有使用絕對路徑了。
２）採用絕對路徑遇到的問題
l 隨著不同的Web應用釋出方式，絕對路徑的值也不同。如Web應用釋出為MyApp，則路徑”/MyApp/images/title.gif”是正確的，但釋出為另一應用時如MyApp2，這個路徑就不對了，也許這個情況比較少，但以default方式釋出Web應用時以上絕對路徑也不同：”/images/title.gif”。
二．解決方案
１）採用絕對路徑，但為了解決不同部署方式的差別，在所有非struts標籤的路徑前加${pageContext.request.contextPath}
”/images/title.gif”，改為
“${pageContext.request.contextPath}/images/title.gif”。
程式碼” ${pageContext.request.contextPath}”的作用是取出部署的應用程式名，這樣不管如何部署，所用路徑都是正確的。
缺點：
操作不便，其他工具無法正確解釋${pageContext.request.contextPath}
２） 採用相對路徑，在每個JSP檔案中加入base標籤，如：
這樣所有的路徑都可以使用相對路徑。
缺點：
對於被包含的檔案依然無效。
真正使用時需要靈活應用１）和２），寫出更加健壯的程式碼。
在使用的時候可以使用${pageContext.request.contextPath}，也同時可以使 用
在jsp頁面中新增base，可用相對路徑：
<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %>
然後在<head>標籤內新增base
<base href="<%=basePath%>"></base>
在本頁面中“直接”引入外部檔案時，可直接
<script src="js/common/jquery-1.11.1.min.js" language="javascript" type="text/javascript"></script> <script src="js/common/frame.js" language="javascript" type="text/javascript"></script> <link href="css/common/frame.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
同理，本頁面中的css類
.top { position: absolute; left: 0; top: 95px; right: 0; height: 120px; background: url(images/common/title.jpg) repeat-x }
========例外情況：引入的外部css、js檔案又引入image等時
這時候如果也用相對路徑的話，因為已經不在了jsp頁面中，此時相對路徑是相對於本css檔案所在的目錄：
如：棠棣新系統，index.jsp頁面中引入的css檔案
<link href="css/common/frame.css" rel="stylesheet" type="text/css" />
這時在jsp頁面中，引入的js/common/frame.js是從網站跟目錄開始尋找，沒問題。
但在frame.js中有如下css
.show_menu{ background-image: url(images/left_bg.gif); background-repeat: repeat-y; background-position:285px 51px; }
這種情況下直接url(images/left_bg.gif);是預設從本css檔案所在目錄（/css/common/frame.css）+url(images/left_bg.gif)，所以此處需要的image需要單獨配置，
改成
.show_menu{ background-image: url(../../images/left_bg.gif); background-repeat: repeat-y; background-position:285px 51px; }