location
location提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息,還提供了一些導(dǎo)航功能。
location對(duì)象是很特別的一個(gè)對(duì)象,它既是window對(duì)象的屬性,也是document對(duì)象的屬性,window.location和document.location引用的是同一個(gè)對(duì)象。
location對(duì)象的用處不只表現(xiàn)在它保存著當(dāng)前文檔的信息,還表現(xiàn)在它將URL解析為獨(dú)立的片段,可以通過(guò)不同的屬性訪問(wèn)這些片段。
- hash : "#contents" 返回URL中的hash(#號(hào)后跟零或多個(gè)字符),如果URL中不包含散列,就返回空字符串。
- host:"www.baidu.com:80" 返回服務(wù)器名稱和端口號(hào)(如果有)
- hostname:"www.baidu.com" 返回不帶端口號(hào)的服務(wù)器名稱
- href:"http:/www.baidu.com",返回當(dāng)前加載頁(yè)面的完整URL。location對(duì)象的toString()方法也返回這個(gè)值。
- pathname:"/WileyCDA/" 返回URL中的目錄和(或)文件名
- port:"8080" 返回URL中指定的端口號(hào)。如果URL中不包含端口號(hào),則這個(gè)屬性返回空字符串。
- protocol:"http:" 返回頁(yè)面使用的協(xié)議,通常是http:或https;
- search:"?q=javascript" 返回URL的查詢字符串。這個(gè)字符串以問(wèn)號(hào)開(kāi)頭
1. 查詢字符串參數(shù)
創(chuàng)建一個(gè)函數(shù),用以解析查詢字符串,然后返回包含所有參數(shù)的一個(gè)對(duì)象:
function getQueryStringArgs() {
//取得查詢字符串并去掉開(kāi)頭的問(wèn)號(hào)
var qs = (location.search.length>0?location.search.substring(1):""),
//保存數(shù)據(jù)的對(duì)象
args = {},
//取得每一項(xiàng)
items = qs.length ? qs.split("&"):[],
itme = null,
name = null,
value = null,
//在for循環(huán)中使用
i = 0,
len = items.length;
//逐個(gè)將每一項(xiàng)調(diào)價(jià)到args中
for(i=0; i<len; i++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if(name.length){
args[name] = value;
}
}
return args;
}
用decodeURIComponent()分別解碼name和value(因?yàn)椴樵冏址畱?yīng)該是被編碼過(guò)的)。
2. 位置操作
使用location對(duì)象可以通過(guò)很多方式來(lái)改變?yōu)g覽器的位置。
最常用的方式,就是使用assign()方法并為其傳遞一個(gè)URL:
location.assign("http://www.wrox.com");
這樣可以立即打開(kāi)新URL并在瀏覽器的歷史記錄中生成一條記錄。如果是將location.href或window.location設(shè)置為一個(gè)URL值,也會(huì)以該值調(diào)用assign()方法。如:
window.location = "http:/www.wrox.com";
location.href = "http:/www.wrox.com";
修改location對(duì)象的其他屬性也可以改變當(dāng)前加載的頁(yè)面。
//假設(shè)初始URL為http://www.wrox.com/WileyCDA/
//將URL修改為http://www.wrox.com/WileyCDA/#section1
location.hash = "#section1";
//將URL修改為http://www.wrox.com/WileyCDA/?q=javascript
location.search = "?q=javascript";
//將URL修改為http://www.baidu.com/WileyCDA/
location.hostname = "www.baidu.com";
//將URL修改為http://www.baidu.com/mydir/
location.pathname = "mydir";
//將URL修改為http://www.baidu.com:8080/WileyCDA/
location.port = 8080;
每次修改location的屬性(hash除外),頁(yè)面都會(huì)以新URL重寫(xiě)加載。
當(dāng)通過(guò)上述任何一種方式修改URL后,瀏覽器的歷史記錄就會(huì)生成一條新記錄,可通過(guò)點(diǎn)擊“后退”按鈕導(dǎo)航前一個(gè)頁(yè)面。
要禁用這種行為,可以使用replace()方法。這個(gè)方法只接受一個(gè)參數(shù),要導(dǎo)航到的URL。結(jié)果會(huì)到時(shí)瀏覽器位置改變,但不會(huì)在歷史記錄中生成新記錄。在調(diào)用replace()方法后,用戶不能回到前一個(gè)頁(yè)面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>You won't be able to get back here</title>
</head>
<body>
<p>Enjoy this page</p>
<script type="text/javascript">
setTimeout(function () {
location.replace("http://www.wrox.com/");
},1000);
</script>
</body>
與位置有關(guān)的最后一個(gè)操作是reload(),作用是重新加載當(dāng)前顯示的頁(yè)面。
location.reload();//重新加載(有可能從緩存中加載)
location.reload(true);//重新加載(從服務(wù)器重新加載)