《JS高程（3）》BOM-02(location)-第8章筆記(07)

location對象

1. URL（統一資源定位符）
   組成：協議，服務器名稱，路徑，文件名和查詢。
   完整的、帶有授權部分的普通統一資源標誌符語法：
   

協議://用戶名:密碼@子域名.域名.頂級域名:端口號/目錄/文件名.文件後綴?參數=值#標誌。

‘#’後跟位置標識符；
‘?’連接作用/清除緩存；
‘&’ 不同參數的間隔符；
‘?’到‘#’之間爲參數部分多個參數之間用‘&’做分隔符。

URL:https://offer.1688.com/offer/post/post_navigation.htm?tracelog=qianniu_rukou_gycp&user_number_id=1934257575&user_id=1934257575

protocol協議:	‘https’
host域名:	‘offer.1688.com’
pathname目錄:	‘offer/post’;
文件名.文件後綴:	‘post_navigation.htm’；
search查詢字符串:	‘?tracelog=qianniu_rukou_gycp&user_number_id=1934257575&user_id=1934257575’

---

2.location 基礎知識

location：BOM對象中的一員；
location：window對象的屬性；
location：document對象的屬性。

window.location 與document.location 引用的是同一個對象。
用處：
提供當前窗口中加載的文檔有關的信息；
部分導航功能；
將URL解析問獨立的片段；

查詢字符串參數

解析查詢字符串，返回包含所有參數的一個對象。

URL:https://offer.1688.com/offer/post/post_navigation.htm?tracelog=qianniu_rukou_gycp&user_number_id=1934257575&user_id=1934257575

(function getQueryStringArgs(){
    //取得查詢字符串並去掉開頭的問號
    //判斷search是否存在，若存在從第二位開始取
    var qs = (location.search.length > 0 ? location.search.substring(1): ""),
    // 保存數據的對象
    args={},
    //取得每一項
    //判斷qs是否存在，若存在以'&'分隔字符
    items = qs.length ? qs.split("&"):[],
    item = null, name = null, value = null,

    i = 0 , len = item.length;
    ///逐個將每一項添加到args對象中
    for(i = 0; i < len ; i++){
        //取items各個項，並用'='分隔
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value =  decodeURIComponent(item[1]);

        if (name.length){
            args[name] = value;
        }
    }
    // args 返回3組值
    console.log(args)
    //Object {tracelog: "qianniu_rukou_gycp", user_number_id: "1934257575", user_id: "1934257575"}
    return args;
})()

每個查詢字符串參數都成了返回對象的屬性，這樣就極大的方便了每個參數的訪問。

---

位置操作

使用location 對象改變瀏覽器的位置。
1. 使用assign()方法併爲其傳遞一個URL

location.assign("http://www.wrox.com");

//效果與assign相同
window.location = "http://www.wrox.com"
//最常用
location.href= "http://www.wrox.com"                                                                                                                        

通過對location的其他屬性也可以修改URL：hash、search、hostname、pathname、port。修改後的URL均會生成一條新的瀏覽記錄，因此可以通過“後退”按鈕都會導航到前面一個頁面。

replace(newURL)：重置瀏覽器位置，不會在 History 對象中生成一個新的記錄,newURL 將覆蓋 History 對象中的當前記錄。。

<p>Enjoy this page for a second, because you won't be coming back here.</p>
<script>
    setTimeout(function(){
        location.replace("http://www.wrox.com");
    },1000);
</script>

reload():參數爲空，且頁面內容未發生改變，默認從瀏覽器緩存中重新加載，參數爲true時，則從服務器重新加載。

location.reload();
location.reload(true);

因reload()調用後的代碼因網絡延遲等問題，執行具有不確定性，所以reload()應位於代碼最後一行。