網頁中各種鏈接引用方法小結
2024-07-11 08:46:27
供稿：網友
本文是我平時實踐而來，若有錯誤，請讀者指出
在網頁中的引用（比如引用css,js,img等對象），總的來說可以分為以下幾種方式
<%--第一種方法--%>
<link href="/site.css" rel="stylesheet" type="text/css" />
<%--第二種方法--%>
<link href="site.css" rel="stylesheet" type="text/css" />
<%--第三種方法--%>
<link href="../site.css" rel="stylesheet" type="text/css" />
<%--第四種方法--%>
<link href="<%=ResolveUrl("~/site.css")%>" rel="stylesheet" type="text/css" />
下面，我在分析一下這四種方法的優缺點
方法一： /url
用法：
這個是從域名頂部開始查找文件
如果你的頁面是：http://www.survivalescaperooms.com/article/1.aspx
引用的css文件時：/css/site.css
最后的css路徑就是：http://www.survivalescaperooms.com/css/site.css
也就是說，它會忽略 http://www.survivalescaperooms.com 后面的所有東西，然后加上自身
局限性：
如果你的網站是一個子網站，比如在IIS下的一個網站中建立應用程序（而不是直接建立一個網站）
那么你網站的根目錄就會是：http://www.test.com/website
問題來了，因為引用都是根據url來判斷的，它根本無法區別你網站的根目錄是什么，所以解析出來的地址也會錯誤，會把"website"都忽略掉
方法二： url
用法：
這個是相對的路徑
如果你的頁面是：http://www.survivalescaperooms.com/article/1.aspx
引用的css文件時：css/site.css
最后的css路徑就是：http://www.survivalescaperooms.com/article/css/site.css
也就是說，它會去除最后一個"/"后的東西，然后加生自身
局限性：
這個的局限性有2個：
第一：如果你在masterpage中做了一個引用，但是內容頁卻在不同的文件夾，最后的引用是根據內容頁來判斷的，所以就出錯了。
第二：如果你用了UrlRewrite，那url和實際文件系統是不同的，那很明顯也會出錯。
方法三： ../url
用法：
其實這個和方法二一樣，../ 是返回上一級的意思
如果你的頁面是：http://www.survivalescaperooms.com/article/1.aspx
引用的css文件時：../css/site.css
最后的css路徑就是：http://www.survivalescaperooms.com/css/site.css
局限性：
局限性和方法二一樣
另外，IIS默認不允許用 ../ 來返回父級，所以要配置一下
方法四： <%=ResolveUrl("~/site.css")%>
用法：
這個用法和方法一差不多，但是有個好處，就是可以避免方法一的局限性
因為這個是靠服務器解析出來的，而不是在客戶端執行的，所以能識別子網站
如果你的頁面是：http://www.cnblogs.com/dozer/article/1.aspx
引用的css文件時：<%=ResolveUrl("~/site.css")%>
最后的css路徑就是：http://www.cnblogs.com/dozer/site.css
局限性：
這個方法是萬能的，但是也不是完美的
因為要靠服務器解析，所以當然不能所見即所得啦，還有就是要多打那么多字，很麻煩
