首先要知道Location這個對象以及這個對象中的一些屬性:html
href:設置或返回完整的url.如本博客首頁返回http://www.cnblogs.com/wymninja/數組
host:設置或返回主機名和當前的URL的端口號。本博客首頁返回www.cnblogs.com瀏覽器
hostname:設置或返回當前URL的主機名。本博客首頁返回www.cnblogs.com服務器
hash:設置或返回從井號(#)開始的URL(錨)。本博客首頁返回 空url
pathname:設置或返回當前URL的路徑部分。本博客首頁返回/wymninja/spa
port:設置或返回當前URL的端口號。本博客首頁返回 空htm
protocol:設置或返回當前URL的協議。本博客首頁返回 http:對象
search:設置或返回從問號 (?) 開始的 URL(查詢部分)blog
location對象屬性圖示:圖片來自慕課網圖片
location的href屬性存放的是文檔的完整 URL,其餘屬性則分別描述了 URL 的各個部分。這些屬性與 Anchor 對象(或 Area 對象)的 URL 屬性很是類似。當一個 Location 對象被轉換成字符串,href 屬性的值被返回。這意味着你可使用表達式 location 來替代 location.href。不過 Anchor 對象表示的是文檔中的超連接,Location 對象表示的倒是瀏覽器當前顯示的文檔的 URL(或位置)
var s = location.toString(); console.log(s); #result //http://www.cnblogs.com/wymninja/
Location對象的這些屬性都是可讀可寫的,若是改變了文檔的location.href,則瀏覽器會載入新的頁面。一樣若是改變了location.hash,則頁面會跳轉到新的錨點,但此時頁面不會重載。
Location對象還有三個方法:assign()、reload()、replace()
assign():加載新的文檔
reload():能夠從新裝載當前文檔
replace():能夠裝載一個新文檔而無須爲它建立一個新的歷史記錄。也就是說,在瀏覽器的歷史列表中,新文檔將替換當前文檔。這樣就不能經過【返回】按鈕返回當前文檔了。
注意:
不要混淆Window對象的location屬性和Document對象的location對象。前者引用一個Location對象,後者只是一個 只讀字符串,並不具備Location對象的任何特性。Document.location與document.URL是同義的。可是,當存在服務器重定 向時,document.location包含的是已經裝載的URL,而location.href包含的則是原始請求的文檔的URL。
因此要獲取瀏覽器URL中查詢字符串的參數。也就是location.search部分。以慕課網圖片爲例就是?courseid = 8&cahpterid = 86中的8和86!!!!而後就利用以下代碼:
function getQuery(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg);//從?以後開始匹配如getQuery(courseid)返回一個數組["courseid=8","","8","&",index:0,input:"courseid=8"]
if (r!=null) return unescape(r[2]); return null; }
其中:
對match不清楚可查閱個人博客Javascript string對象
unescape 對參數進行解碼,如空格解碼爲20%