BOM之location物件

小火柴的藍色理想發表於2015-09-18
物件

前面的話

　　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);

 

相關文章