網頁、JS、CSS和Flash中的相對路徑

網頁、JS、CSS和Flash中的相對路徑

超連結是互連網的魅力所在。為了把互連網上眾多分散的網站和網頁聯絡起來，構成一個有機的整體，就要在網頁上加入連結。通過點擊網頁上的連結，我們才能在資訊海洋中盡情遨遊。

超連結有以下幾類：

• 內部連結：同一網站內文檔之間的連結
• 外部連結：不同網站文檔之間的連結
• 錨點連結：同一網頁或不同網頁指定位置的連結
• 電子郵件連結：電子郵件的連結

在製作內部連結或外部連結時，為了引用文檔和素材，需要描述被引用的文檔或素材的位置，這種描述通常有兩種寫法，分別是“相對路徑”和“絕對路徑”。而“相對路徑”又分為“根相對路徑”和“文檔相對路徑”兩種。下面我們分別加以說明。

實體路徑：在說明絕對路徑和相對路徑的概念和區別之前，我們需要先瞭解實體路徑，所謂實體路徑，是指文檔或素材在伺服器上的絕對儲存位置，這種位置實際上就是伺服器作業系統下的檔案系統中對文檔位置的描述，例如，在Windows系統中，一個文檔的絕對位置是“d:/doc/1.htm”，而在Linux系統中，一個文檔的絕對位置可能是“/home/www/1.htm”。

絕對路徑是包含伺服器協議（在本例中為http協議）的完整的路徑，例如，一個指向資訊快車首頁的完全路徑是“http://www.china-yantai.net/index.htm”。如果需要在網頁中連結當前網站之外的文檔或素材，應該採用絕對路徑。

與絕對路徑不同，相對路徑自身並不包含完整的路徑資訊（例如，不包含伺服器協議），相對路徑描述的是被引用文檔和當前文檔之間的相對位置關係（文檔相對路徑）或被引用文檔和網站根目錄之間的相對位置關係（根相對路徑）。當在瀏覽器中點擊某個使用相對路徑的連結時，瀏覽器會自動擷取當前文檔的伺服器協議、地址和連接埠等資訊，並將該資訊和相對路徑發送到伺服器上，而伺服器則根據當前文檔位置和相對路徑，計算出被引用文檔的絕對位置並擷取文檔，最終將結果返回給瀏覽器。

根相對路徑以“/”開頭（請注意，不能是“/”），是從當前網站的根目錄到被引用文檔的完整路徑。例如，某個網站的根目錄為/home/www，其下有一個文檔/home/www/a/b/1.htm，則該文檔的根相對路徑為“/a/b/1.htm”。

文檔相對路徑是指從當前文檔所在目錄訪問被引用文檔的路徑。也就是說，相對路徑描述的是當前文檔所在目錄和被引用文檔所在目錄的相對位置關係。例如，當前文檔的實體路徑是/home/www/a/1.htm，而被引用文檔的實體路徑是/home/www/b/2.htm，第二個文檔相對於第一個文檔的相對路徑就是“../b/2.htm”。

在使用相對路徑時，我們需要知道如何描述當前文檔所在目錄以及如何描述當前文檔的上一級目錄（父目錄）。通常我們使用“./”或空描述當前文檔所在目錄，例如，當前文檔為/home/www/a/1.htm，則“./2.htm”和“2.htm”都是一個指向“/home/www/a/2.htm”的相對路徑。 在描述當前文檔所在目錄的上一級目錄時，我們使用首碼“../”，如果你用過Dos系統，請回憶我們經常使用的一個命令“cd ..”，這就是將目前的目錄跳轉到上一級目錄的命令。還是上面的例子，如果相對路徑為“../b/2.htm”，則我們請求的是實體路徑為“/home/www/b/2.htm”的文檔。 “../”和“./”可以任意組合，例如，“../../”代表目前的目錄的上一級目錄的上一級目錄。

在瞭解絕對路徑和相對路徑的概念和區別之後，我們還需要掌握使用它們的時機。一般來說，如果需要引用當前網站外部的文檔和素材，我們應該使用絕對路徑；而在引用當前網站內部的文檔和素材時，我們應該使用相對路徑。由於相對路徑中不包含網站地址等資訊，從而使得網站更容易移植（例如，更換網站網域名稱），因此，雖然也可以使用絕對路徑連結同一網站內的文檔，但應該盡量使用相對路徑。 一般來說，在製作內部連結時，我們應該盡量使用文檔相對路徑，而不是根相對路徑，這樣做的原因是在本地預覽網站時，瀏覽器並不承認當前網站的根目錄為伺服器，因此會導致連結錯誤的情況，使用文檔相對路徑則沒有這樣的問題。 但在某些情況下，使用根相對路徑是更好的選擇，比較典型的是“農村資訊化自助建網產生器”中的“著作權資訊”的編輯，如果在著作權資訊中引用了一個站內素材（例如自訂檔案下的一張圖片），由於著作權資訊的代碼同時為多個不同目錄下的網頁所使用（例如，同時被首頁和一級頁面所使用），由於這些網頁的所在目錄不同，無法使用文檔相對路徑，此時，使用根相對路徑則可以得到正確的結果（當然，這個“正確”是指在上傳後的網站內是正確的）。

在“農村資訊化自助建網產生器”中產生連結時，軟體已經自動幫我們計算了文檔之間的相對路徑（通常是使用文檔相對路徑），使用者無需考慮路徑的寫法。

最後，我們來討論一下如何在網頁、JS檔案、CSS檔案和Flash中正確地書寫相對路徑。

• 在網頁中書寫相對路徑：使用被引用文檔或素材相對於當前頁面的相對路徑，例如，在網頁“/home/www/a/index.htm”引用素材“/home/www/a/images/a.jpg”，其相對路徑應該是“./images/a.jpg”或“images/a.jpg”。
• 在JS檔案中書寫相對路徑：JS檔案是指在頁面中引用的外部JavaScript檔案，其中可能採用JavaScript代碼產生html代碼，由於產生的html代碼是嵌入在引用該JS檔案的頁面中，因此，在描述相對路徑時，應該使用被引用的文檔或素材相對於引用JS檔案的頁面之間的相對路徑。例如，文檔“/home/www/a/index.htm”中引用了JS檔案“/home/www/a/js/hello.js”，而在該js中產生一段引用素材“/home/www/a/images/1.jpg”的html代碼，則在這段代碼中，其相對路徑應該是“./images/1.jpg”或“images/1.jpg”，而不能是“../images/1.jpg”。
• 在CSS檔案中書寫相對路徑：CSS檔案是指在頁面中引用的外部樣式定義檔案，該檔案通常用於定義頁面中各種html標記的顯示效果（例如文本的字型名稱、字型大小、縮排、邊距等），CSS檔案中同樣可以引用外部的素材或文檔（例如設定某個DIV對象的背景圖片）。和JS檔案不同，瀏覽器認為CSS檔案也是一個獨立的文檔，因此，在CSS中對素材的引用可以通過計算素材檔案和該CSS檔案之間的相對路徑來實現，而與引用該CSS檔案的頁面所在的位置無關。例如，文檔“/home/www/a/index.htm”中引用了CSS檔案“/home/www/a/css/main.css”，而在該CSS中引用了素材“/home/www/a/images/1.jpg”，則在CSS中對於該素材引用的相對路徑應該是“../images/1.jpg”，而不能是“./images/1.jpg”或“images/1.jpg”。
• 在Flash中書寫相對路徑：Flash用於表現網頁中的某些動態效果，使用Flash的網頁往往更美觀，互動性更強。在Flash檔案中，同樣可以引用外部的素材（例如，使用Flash製作一個精美的相簿），那麼，應該如何在Flash中使用相對路徑引用外部素材呢？與JS檔案類似，瀏覽器也不認為Flash檔案是一個獨立的文檔，而是認為其是一個嵌入在頁面內的素材，因此，在Flash檔案中引用素材時，同樣應該使用被引用的素材和嵌入Flash的html頁面之間的相對路徑。例如，文檔“/home/www/a/index.htm”中引用了Flash檔案“/home/www/a/swf/main.swf”，而該Flash中引用了素材“/home/www/a/images/1.jpg”，則正確的相對路徑是“./images/1.jpg”或“images/1.jpg”，而不是“../images/1.jpg”。
• 我補充一下自己的見解：如果是在jsp上請求比如：http://localhost:8888/test1/agencies/agencies_search.do跳轉到/test1/module/agencies/agenciesSearch.jsp這個頁面。在這個頁面中有張圖片名為1.jpg，那麼在jsp中該如何確定這張圖片的位置呢？在本地開發的時候相對的是本地檔案系統的路徑，而在伺服器上啟動並執行時候是相對於 URL的訪問路徑。根據上面這句話來分析，如果寫成如下形式：images/left.jpg則說明圖片應該在/test1/agencies/images/left.jpg.因為這個路徑就是相對於url的相對路徑。如果寫成：../images/left.jpg,則圖片應該在/test1/images/left.jpg.