首先要知道Location這個(gè)對(duì)象以及這個(gè)對(duì)象中的一些屬性:
href:設(shè)置或返回完整的url.如本博客首頁返回http://www.cnblogs.com/wymninja/
host:設(shè)置或返回主機(jī)名和當(dāng)前的URL的端口號(hào)拍冠。本博客首頁返回www.cnblogs.com
hostname:設(shè)置或返回當(dāng)前URL的主機(jī)名羡宙。本博客首頁返回www.cnblogs.com
hash:設(shè)置或返回從井號(hào)(#)開始的URL(錨)鸠删。本博客首頁返回 空
pathname:設(shè)置或返回當(dāng)前URL的路徑部分易阳。本博客首頁返回/wymninja/
port:設(shè)置或返回當(dāng)前URL的端口號(hào)。本博客首頁返回 空
protocol:設(shè)置或返回當(dāng)前URL的協(xié)議饵沧。本博客首頁返回 http:
search:設(shè)置或返回從問號(hào) (?) 開始的 URL(查詢部分)
location對(duì)象屬性圖示:圖片來自慕課網(wǎng)
location的href屬性存放的是文檔的完整 URL锨络,其他屬性則分別描述了 URL 的各個(gè)部分。這些屬性與 Anchor 對(duì)象(或 Area 對(duì)象)的 URL 屬性非常相似狼牺。當(dāng)一個(gè) Location 對(duì)象被轉(zhuǎn)換成字符串羡儿,href 屬性的值被返回。這意味著你可以使用表達(dá)式 location 來替代 location.href是钥。不過 Anchor 對(duì)象表示的是文檔中的超鏈接掠归,Location 對(duì)象表示的卻是瀏覽器當(dāng)前顯示的文檔的 URL(或位置)
Location對(duì)象的這些屬性都是可讀可寫的,如果改變了文檔的location.href悄泥,則瀏覽器會(huì)載入新的頁面虏冻。同樣如果改變了location.hash,則頁面會(huì)跳轉(zhuǎn)到新的錨點(diǎn)弹囚,但此時(shí)頁面不會(huì)重載厨相。
Location對(duì)象還有三個(gè)方法:assign()、reload()鸥鹉、replace()
assign():加載新的文檔
reload():可以重新裝載當(dāng)前文檔
replace():可以裝載一個(gè)新文檔而無須為它創(chuàng)建一個(gè)新的歷史記錄蛮穿。也就是說,在瀏覽器的歷史列表中宋舷,新文檔將替換當(dāng)前文檔绪撵。這樣就不能通過【返回】按鈕返回當(dāng)前文檔了。
注意:
不要混淆Window對(duì)象的location屬性和Document對(duì)象的location對(duì)象祝蝠。前者引用一個(gè)Location對(duì)象,后者只是一個(gè) 只讀字符串,并不具有Location對(duì)象的任何特性绎狭。Document.location與document.URL是同義的细溅。但是,當(dāng)存在服務(wù)器重定 向時(shí)儡嘶,document.location包含的是已經(jīng)裝載的URL,而location.href包含的則是原始請(qǐng)求的文檔的URL喇聊。
所以要獲取瀏覽器URL中查詢字符串的參數(shù)。也就是location.search部分蹦狂,以慕課網(wǎng)圖片為例就是?courseid = 8&cahpterid?= 86中的8和86J睦椤!?ā窜骄!然后就利用如下代碼:
其中:
對(duì)match不清楚可查閱我的博客Javascript string對(duì)象
unescape 對(duì)參數(shù)進(jìn)行解碼,如空格解碼為20%摆屯。
也可訪問我的博客胖胖梅博客之如何獲取瀏覽器URL中查詢字符串的參數(shù)?