主版頁面 javascript 檔案的相對路徑問題

一個經常讓開發人員疑惑的問題是主版頁面是如何處理相對路徑的。如果你使用的是靜態文字，這一問題不會困擾你。不過，如果你加入了<img>標籤或者指向其他資源的HTML標籤，問題就可能發生。

當你把主版頁面和內容頁放在不同的目錄時，問題就發生了。把主版頁面和內容頁分放到不同的目錄，這是大型網站推薦使用的最佳實務。實際上，微軟建議你在專門的檔案夾裡儲存所有的主版頁面。不過，如果你不夠小心，使用相對路徑時會帶來問題。

例如，假設你把主版頁面放在一個叫做MasterPages的子檔案夾裡，並在主版頁面裡加入了如下的<img>標籤：

假設檔案\MasterPages\banner.jpg存在，這看起來是行得通的。甚至在Visual Studio設計環境會出現圖片。但是，如果你在另一個子檔案夾裡建立了一個內容頁，路徑就會被解釋成相對於那個檔案夾。如果檔案在那裡不存在，就會得到 一個破損的連結而看不到圖片。更糟的是，如果有一幅具有相同檔案名稱的另外一個圖片，你會不經意地得到一幅錯誤的圖片。

這樣的問題之所以會發生，是因為<img>標籤是普通的HTML。所以，ASP.NET不會接觸到它。遺憾的是，當ASP.NET建立 內容頁的時候，這個標籤就不合適了。相同的問題出現在向其他頁面提供相對連結的<a>標籤以及用來把主版頁面連結到樣式表 的<link>元素。

要解決這一問題，你可以預先把URL寫成相對於內容頁面的地址。不過這會帶來混淆，限制主版頁面使用的範圍，並且產生在設計環境裡不正確顯示主版頁面的負面效應。

另一個快捷的解決方案是把圖片標籤變成伺服器端控制項，這樣ASP.NET就會修複這個錯誤：

這個解決辦法會起作用是因為ASP.NET根據這一資訊建立一個HtmlImage伺服器控制項。這個對象在主版頁面的Page對象執行個體化後建立，此時，ASP.NET把所有路徑解釋為相對於主版頁面的位置。你可以使用同樣的技術來修複<a>標籤對其他頁面的連結。

你還可以使用根路徑文法，並用"~"字元作為URL的開頭。例如，下面這個<img>標籤毫無歧義地指向網站的MasterPages檔案夾中的banner.jpg檔案。

遺憾的是，這種文法只對伺服器端控制項有效。如果你要對普通的HTML產生同樣的效果，你需要在連結裡包含網域名稱的完整的相對路徑。這樣的HTML代碼難看且不可移植，所以不推薦使用。

 

 

最終方案

<script src="js/jquery.js" type="text/javascript" runat="server"></script>

運行時出錯,說是jquery.js中的第12行的$符號不知道是什麼意思,把runat="server"去掉後又成功,看來是不能加runat="server"這個屬性

解決方案:

<script src='<%=ResolveUrl("~/js/jquery.js") %>' type="text/javascript"></script>