BOM之location對象 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　location提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能。location是一個很特別的對象，因為它既是window對象的屬性，也是document對象的屬性，而且還可以單獨使用。本文將詳細介紹location對象

//Location {hash: "", search: "", pathname: "/", port: "8080", hostname: "127.0.0.1"…}
console.log(window.location);
//Location {hash: "", search: "", pathname: "/", port: "8080", hostname: "127.0.0.1"…}
console.log(document.location);
//Location {hash: "", search: "", pathname: "/", port: "8080", hostname: "127.0.0.1"…}
console.log(location);

屬性

　　location將URL解析成獨立的片段，讓開發人員可以通過不同的屬性訪問這些片段

var URL = 'http://localhost:8080/index.html#text?q=test';
console.log(location.hash);//#text?q=test
console.log(location.host);//localhost:8080
console.log(location.hostname);//localhost
console.log(location.href);//http://localhost:8080/index.html#text?q=test
console.log(location.pathname);///index.html
console.log(location.port);//8080
console.log(location.protocol);//http:
console.log(location.search);''

　　如果URL中'?'之前有一個'#'，比如'#text?q=test'，那么，location.search得到的就是空字符串''，因為location.search只有取到'?'后面和'#'前面的內容

var URL = 'http://localhost:8080/index.html?q=test#text';
console.log(location.hash);//#text
console.log(location.search);//?q=test

　　盡管location.search返回從問號到URL末尾的所有內容，但卻沒有辦法逐個訪問其中的每個查詢字符串參數。為此，創建一個函數，用以解析查詢字符串，然后返回包含所有參數的一個對象:

function getQueryStringArgs(){
    //取得查詢字符串并去掉開頭的問號
    var qs = location.search.length > 0  ? location.search.substring(1) : "";
    //保存數據的對象
    var args = {};
    //取得每一項
    var items = qs.length ? qs.split("&") : [];
    var item,name,value;
    var len = items.length;
    //逐個將每一項添加到args對象中
    for(var 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;
}
location.search = "?name=abc&password=123&callback=fn";
console.log(getQueryStringArgs());//[name: "abc", password: "123", callback: "fn"]

方法

　　使用location對象可以通過很多方式來改變瀏覽器的位置

【1】assign()

　　使用assign()方法并為其傳遞一個URL，可以立即打開新URL并在瀏覽器的歷史記錄中生成一條記錄。如果是將location.href或window.location設置為一個URL值，相當于調用assign()方法。

location.assign("http://baidu.com");
window.location = "http://baidu.com";
document.location = "http://baidu.com";
location.href = "http://baidu.com";//最常用

　　每當修改location的屬性(hash除外)，頁面都會以新URL重新加載

//修改hash值
location.hash = "#section1";
//修改查詢字符串
location.search = "?q=javascript";
//修改主機名
location.hostname = "www.baidu.com"
//修改路徑
location.pathname = "mydir"
//修改端口號
location.port = "8080"

【2】replace()

　　通過上述任意一種方式修改URL后，瀏覽器的歷史記錄都會生成一條新記錄，因此用戶通過單擊后退按鈕會導航到前一個頁面

　　而要禁用這種行為，可以使用replace()方法，該方法接收一個參數即要導航到的URL，結果雖然會導致瀏覽器位置改變，但不會在歷史記錄中生成新記錄，也就是說用戶不能回到前一個頁面

　　[注意]只有chrome下有效

location.replace("http://baidu.com")

【3】reload()

　　reload()方法用于重新加載當前顯示的頁面。如果調用reload()方法時不傳遞任何參數，頁面會以最有效的方式重新加載。也就是說，如果頁面自上次請求以來并沒有改變過，頁面就會從瀏覽器緩存中重新加載。如果要強制從服務器重新加載，則需要傳遞參數true

　　位于reload()調用之后的代碼可能會也可能不會執行，這要取決于網絡延遲或系統資源等因素，為此，最好將reload()放在代碼的最后一行

//有可能從緩存中加載
location.reload();

//從服務器重新加載
location.reload(true);

　　[注意]千萬不要在頁面中直接使用location.reload()方法，此方法會造成頁面的無限刷新。因為頁面剛加載完成，遇到該方法，則重新加載頁面，又遇到該方法，則又加載頁面，從而造成頁面的無限刷新

事件

　　HTML5新增了hashchange事件，以便在URL的參數列表(及URL中“#”號后面的所有字符串)發生變化時通知開發人員。之所以新增這個事件，是因為在Ajax應用中，開發人員經常要利用URL參數列來保存狀態或導航信息

　　[注意]IE7-瀏覽器不支持haschange事件

　　必須要把hashchange事件處理程序添加給window對象，然后URL參數列表只要變化就會調用它。此時的event對象應該額外包含兩個屬性：oldURL和newURL。這兩個屬性分別保存著參數列表變化前后的完整URL

　　[注意]所有IE瀏覽器都不支持oldURL和newURL這兩個屬性

window.onhashchange = function(e){
    e = e || event;
    console.log(e.oldURL,e.newURL);
}

　　對于不支持這兩個屬性的IE瀏覽器，可以通過定期檢查location.hash屬性來模擬

(function(window) {
  if ( "onhashchange" in window.document.body ) { return; }

  var location = window.location;
  var oldURL = location.href;
  var oldHash = location.hash;

  // 每隔100毫秒檢查一下URL的hash
  setInterval(function() {
    var newURL = location.href;
    var newHash = location.hash;

    if ( newHash != oldHash && typeof window.onhashchange === "function" ) {
      window.onhashchange({
        type: "hashchange",
        oldURL: oldURL,
        newURL: newURL
      });

      oldURL = newURL;
      oldHash = newHash;
    }
  }, 100);

})(window);