1. 前端使用js如何准確獲取當前頁面url網址信息
在WEB開發中，時常會用到javascript來獲取當前頁面的url網址信息，在這里是我的一些獲取url信息的小總結。
下面我們舉例一個URL，然後獲得它的各個組成部分：http://i.cnblogs.com/EditPosts.aspx?opt=1
1、window.location.href(設置或獲取整個 URL 為字元串)
var test = window.location.href;
alert(test);
返回：http://i.cnblogs.com/EditPosts.aspx?opt=1
2、window.location.protocol(設置或獲取 URL 的協議部分)
var test = window.location.protocol;
alert(test);
返回：http:
3、window.location.host(設置或獲取 URL 的主機部分)
var test = window.location.host;
alert(test);
返回：i.cnblogs.com
4、window.location.port(設置或獲取與 URL 關聯的埠號碼)
var test = window.location.port;
alert(test);
返回：空字元(如果採用默認的80埠(update:即使添加了:80)，那麼返回值並不是默認的80而是空字元)
5、window.location.pathname(設置或獲取與 URL 的路徑部分（就是文件地址）)
var test = window.location.pathname;
alert(test);
返回：/EditPosts.aspx
6、window.location.search(設置或獲取 href 屬性中跟在問號後面的部分)
var test = window.location.search;
alert(test);
返回：?opt=1
PS：獲得查詢（參數）部分，除了給動態語言賦值以外，我們同樣可以給靜態頁面，並使用javascript來獲得相信應的參數值。
7、window.location.hash(設置或獲取 href 屬性中在井號「#」後面的分段)
var test = window.location.hash;
alert(test);
返回：空字元(因為url中沒有)
8、js獲取url中的參數值
一、正則法
function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var r = window.location.search.substr(1).match(reg); if (r != null) { return unescape(r[2]); } return null;}// 這樣調用：alert(GetQueryString("參數名1")); alert(GetQueryString("參數名2")); alert(GetQueryString("參數名3"));
二、split拆分法
function GetRequest() {
var url = location.search; //獲取url中"?"符後的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var Request = new Object();
Request = GetRequest();<br>// var id=Request["id"];
// var 參數1,參數2,參數3,參數N;
// 參數1 = Request['參數1'];
// 參數2 = Request['參數2'];
// 參數3 = Request['參數3'];
// 參數N = Request['參數N'];
三、指定取
比如說一個url：http://i.cnblogs.com/?j=js,我們想得到參數j的值，可以通過以下函數調用。
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg); //獲取url中"?"符後的字元串並正則匹配
var context = "";
if (r != null)
context = r[2];
reg = null;
r = null;
return context == null || context == "" || context == "undefined" ? "" : context;
}
alert(GetQueryString("j"));
四、單個參數的獲取方法
function GetRequest() {
var url = location.search; //獲取url中"?"符後的字串
if (url.indexOf("?") != -1) { //判斷是否有參數
var str = url.substr(1); //從第一個字元開始 因為第0個是?號 獲取所有除問號的所有符串
strs = str.split("="); //用等號進行分隔 （因為知道只有一個參數 所以直接用等號進分隔 如果有多個參數 要用&號分隔 再用等號進行分隔）
alert(strs[1]); //直接彈出第一個參數 （如果有多個參數 還要進行循環的）
}
}
一、正則法
functiongetQueryString(name) {
varreg = newRegExp('(^|&)'+ name + '=([^&]*)(&|$)', 'i');
varr = window.location.search.substr(1).match(reg);
if(r != null) {
returnunescape(r[2]);
}
returnnull;
}
// 這樣調用：
alert(GetQueryString("參數名1"));
alert(GetQueryString("參數名2"));
alert(GetQueryString("參數名3"));
二、split拆分法
functionGetRequest() {
varurl = location.search; //獲取url中"?"符後的字串
vartheRequest = newObject();
if(url.indexOf("?") != -1) {
varstr = url.substr(1);
strs = str.split("&");
for(vari = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
returntheRequest;
}
varRequest = newObject();
Request = GetRequest();<br>// var id=Request["id"];
// var 參數1,參數2,參數3,參數N;
// 參數1 = Request['參數1'];
// 參數2 = Request['參數2'];
// 參數3 = Request['參數3'];
// 參數N = Request['參數N'];
三、指定取
比如說一個url：http://i.cnblogs.com/?j=js,我們想得到參數j的值，可以通過以下函數調用。
functionGetQueryString(name) {
varreg = newRegExp("(^|&)"+ name + "=([^&]*)(&|$)", "i");
varr = window.location.search.substr(1).match(reg); //獲取url中"?"符後的字元串並正則匹配
varcontext = "";
if(r != null)
context = r[2];
reg = null;
r = null;
returncontext == null|| context == ""|| context == "undefined"? "": context;
}
alert(GetQueryString("j"));
四、單個參數的獲取方法
functionGetRequest() {
varurl = location.search; //獲取url中"?"符後的字串
if(url.indexOf("?") != -1) { //判斷是否有參數
varstr = url.substr(1); //從第一個字元開始 因為第0個是?號 獲取所有除問號的所有符串
strs = str.split("="); //用等號進行分隔 （因為知道只有一個參數 所以直接用等號進分隔 如果有多個參數 要用&號分隔 再用等號進行分隔）
alert(strs[1]); //直接彈出第一個參數 （如果有多個參數 還要進行循環的）
}
}
2. Web前端中關於url、href、src的知識匯總
今天小編要跟大家分享的文章是Web前端中關於url、href、src的知識匯總。熟悉web前端的小夥伴們一定不會對這三個內容陌生。但是對於剛剛接觸web的小夥伴肯定不是很了解，今天小編就敗漏租為大家准備了這篇文章讓我們一起來看一看關於url、href、src的知識匯總。
一、URL的概念
統一資源定位符(或稱統一資源定位器/定位地址、URL地址等，英語：UniformResource
Locator，常縮寫為URL)，有時也被俗稱為網頁地址(網址)。如同在網路上的門牌，是網際網路上標準的資源的地址(Address)。
二、URL的格式
2.1標准格式
協議類型:[//伺服器地址[:埠號]][/資源層級UNIX文件路徑]文件名?查詢
2.2完整格式
協議類型:[//[訪問資源需要的憑證信息@]伺服器地址[:埠號]][/資源層級UNIX文件路徑]文件名?查詢
其中【訪問憑證信息@;:埠號;?查詢;#片段ID】都屬於選填項。
三、URL的語法規則
比如網址#/html/index.asp，必須遵守以下的語法規則：
scheme://host.domain:port/path/filename
3.1說明
(1)scheme-定義網際網路服務的類型。最常見的類型是http(2)host-定義域主機(http的默認主機是www)
(3)domain-定義網際網路域名，比如w3school.com.cn(4):port-定義主機上的埠號(http的默認埠號是80)
(5)path-定義伺服器上的路徑(如果省略，則文檔必須位於網站的根目錄中)。(6)filename-定義文檔/資源的名稱
3.2URLSchemes
以下是其中一些最流行的scheme：
Scheme訪問用於...
http超文本傳輸協議以http://開頭的普通網頁。不加密。
https安全超文本傳輸協議安全網頁。加密所有信息交換。
ftp文件傳輸協議用於將文件下載或上傳至網站。
file您計算機上的文件。
四、URL的類型
4.1絕對URL
絕對URL(absoluteURL)顯示文件的完整路徑，這意味著絕對URL本身所在的位置與被引用的實際文件的位置無關。
4.2相對URL
相對URL(relativeURL)以包含URL本身的文件夾的位置為參考點，描述目標文件夾的位置。
一般來說，對於同一伺服器上的文件，應該總是使用相對URL，它們更容易輸入，而且在將頁面從本地系統轉移到伺服器上時更方便，只要每個文件的相對位置保持不變，鏈接就仍然是有效地。
以下為建立路徑所使用的幾個特殊符號，及其所代表的意義。
(1).：代表目前所在的目錄，相對路徑。如：文本或
(2)..：代表上一層目錄，相對路徑。如：文本或
(3)../../：代表的是上一層目錄的上一層目錄，相對路徑。如：
(4)/：代表根目錄，絕對路徑。如：[文本](/abc)或
五、href的概念
5.1規范解釋
href(Hypertext
Reference)指定網路資源的位置，從而在當前元素或者當前文檔和由當前屬性定義的需要的錨點或資源之間定義一個鏈接或者關系。
5.2通俗理解
href目的不是為了引用資源，而是為了建立聯系，讓當前標簽能夠鏈接到目標地址。
六、src的概念
source(縮寫)，指向外部資源的位置，指向的內容將會應用到文檔中當前標簽所在位置。
七、href和src的區別
7.1請求資源類型不同
(1)href指向網路資源所在位置，建立和當前元素(錨點)或當前文檔(鏈接)之間的聯系。
(2)在請求src資源時會將其指向的資源下載並應用到文檔中，比如JavaScript腳本，img圖片;
7.2作用結果不同
(1)href用於在當前文檔和引用察兆資源之間確立聯系;
(2)src用於替換當前內容;
7.3瀏覽器解析方式不同
(1)若在文檔中添加，瀏覽器會識別該文檔為CSS文件，就會並行下載資源並且不會停止對當前文檔的處理。這也是為什麼建議使用link方式載入
CSS，而不是使用@import方式。
(2)當瀏覽器解析到
，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等也如此，類似於將所指向資源應用到當前內容。這也是為什麼建議把js
腳本放在底部而不是頭部的原因。
八、link和@import的區別
兩者都是外部引用CSS的方式，但是存在一定的搜州區別：
(1)link是XHTML標簽，除了能夠載入CSS，還可以定義RSS等其他事務;而@import屬於CSS范疇，只可以載入CSS。
(2)link引用CSS時，在頁面載入時同時載入;@import需要頁面完全載入以後再載入。
(3)link是XHTML標簽，無兼容問題;@import則是在CSS2.1提出的，低版本的瀏覽器不支持。
(4)link支持使用Javascript控制DOM改變樣式;而@import不支持。
以上就是小編今天為大家分享的關於Web前端中關於url、href、src的知識匯總的文章，希望本篇文章能夠對正在從事web學習和工作的小夥伴們有所幫助，想要了解更多web相關知識記得關注北大青鳥web培訓官網哦~
作者：WEBING
#/a/1190000013845173
*聲明：內容與圖片均來源於網路(部分內容有修改)，版權歸原作者所有，如來源信息有誤或侵犯權益，請聯系我們刪除或授權事宜。
3. 怎麼通過url找到web項目中的資源文件
url="D:/STUDY/js/images/1.gif" //絕對路徑（知道具體路徑）
src="../images" //相對路徑
../表示源文件所在目錄的上一級目錄，../../表示源文件所在目錄的上上級目錄
如果你的文件和Tomcat是同一級，src="Tomcat/WebRoot/images"
如果你的文件在Tomcat下來訪問images文件夾，則src="../Tomcat/WebRoot/images"