JS location物件詳解

location 物件儲存了當前文件位置（URL）相關的資訊，簡單地說就是網頁地址字串。使用 window 物件的 location 屬性可以存取。

location 物件定義了 8 個屬性，其中 7 個屬性可以獲取當前 URL 的各部分資訊，另一個屬性（href）包含了完整的 URL 資訊，詳細說明如下表所示。為了便於更直觀的理解，下表中各個屬性將以下面 URL 範例資訊為參考進行說明。

舉例說明：
http://www.123.cn:80/news/index.asp?id=123&name=location#top

location 物件屬性

屬性	說明
href	宣告了當前顯示文件的完整 URL，與其他 location 屬性只宣告部分 URL 不同，把該屬性設定為新的 URL 會使瀏覽器讀取並顯示新 URL 的內容
protocol	宣告了 URL 的協定部分，包括字尾的冒號。例如：“http:”
host	宣告了當前 URL 中的主機名和埠部分。例如：“www.123.cn:80”
hostname	宣告了當前 URL 中的主機名。例如：“www.123.cn”
port	宣告了當前 URL 的埠部分。例如：“80”
pathname	宣告了當前 URL的路徑部分。例如：“news/index.asp”
search	宣告了當前 URL 的查詢部分，包括前導問號。例如：“?id=123&name=location”
hash	宣告了當前 URL 中錨部分，包括前導符（#）。例如：“#top”,指定在文件中錨記的名稱

使用 location 物件，結合字串方法可以抽取 URL 中查詢字串的引數值。

範例

下面定義了一個獲取 URL 查詢字串引數值的通用函數，該函數能夠抽取每個引數和引數值，並以名/值對的形式儲存在物件中返回。

var queryString = function () {  //獲取URL查詢字串引數值的通用函數
    var q = location.search.substring (1);  //獲取查詢字串，如“id=123&name=location”
    var a = q.split ("&");  //以&符號為界把查詢字串劈開為陣列
    var o = {};  //定義一個臨時物件
    for (var i = 0; i < a.length; i ++) {  //遍歷陣列
        var n = a[i].indexOf ("=");  //獲取每個引數中的等號下標位置
        if (n == -1) continue;  //如果沒有發現則跳到下一次迴圈繼續操作
        var v1 = a[i].substring (0, n);  //擷取等號前的引數名稱
        var v2 = a[i].substring (n + 1);  //擷取等號後的引數值
        o[v1] = unescape (v2);  //以名/值對的形式儲存在物件中
    }
    return o;  //返回物件
}

然後呼叫該函數，即可獲取 URL 中的查詢字串資訊，並以物件形式讀取它們的值。

var f1 = queryString ();  //呼叫查詢字串函數
for (var i in f1) {  //遍歷返回物件，獲取每個引數及其值
    console.log(i + "=" + f1[i]);
}

如果當前頁面的 URL 中沒有查詢字串資訊，使用者可以在瀏覽器的位址列中補加完整的查詢字串，如“?id=123&name=location”，再次重新整理頁面，即可顯示查詢的字串資訊。

location 物件的屬性都是可讀可寫的。例如，如果把一個含有 URL 的字串賦給 location 物件或它的 href 屬性，瀏覽器就會把新的 URL 所指的文件裝載進來，並顯示出來。

location = "http://c.biancheng.net/dede/";  //頁面會自動跳轉到對應的頁面
location.href = "http://c.biancheng.net/";  //頁面會自動跳轉到對應的頁面

如果改變 location.hash 屬性值，則頁面會跳轉到新的錨點(<a name="anchor"> 或 <element id="anchor">），但不會過載。

location.hash = "#top";

除了設定 location 物件的 href 屬性外，還可以修改部分 URL 資訊，使用者只需要給 location 物件的其他屬性賦值即可。這時會建立一個新的 URL，瀏覽器會將它裝載並顯示出來。

如果需要 URL 其他資訊，只能通過字串處理方法擷取。例如，如果要獲取網頁的名稱，可以這樣設計。

var p = location.pathname;
var n = p.substring (p.lastIndexOf ("/") + 1);

如果要獲取副檔名，可以這樣設計。

var c = p.substring (p.lastIndexOf (".") + 1);

location 物件還定義了兩個方法：reload() 和 replace()。

• reload()：可以重新裝載當前文件。
• replace()：可以裝載一個新文件而無須為它建立一個新的歷史記錄。也就是說，在瀏覽器的歷史列表中，新文件將替換當前文件。這樣在瀏覽器中就不能通過單擊“返回”按鈕返回當前的文件。

對那些使用了框架並且顯示多個臨時頁的網站來說，replace() 方法比較有用。這樣臨時頁面都不被儲存在歷史列表中。

window.location 與 document.location 不同，前者參照 location 物件，後者只是一個唯讀字串，與 document.URL 同義。但是，當存在伺服器重定向時，document.location 包含的是已經裝載的 URL，而 location.href 包含的則是原始請求文件的 URL。