讀書筆記【JS 權威指南】14.2 瀏覽器定位和導航

xuanxuanQueen發表於2019-08-04
筆記JS瀏覽器

Windos物件的location屬性引用的是Location物件，它表示該視窗中當前顯示的文件的URL，並定義了方法來使視窗載入新的文件。其包含的屬性被稱為“URL分解”屬性，同時被Link物件支援。

JavaScript

14.2.1解析URL

/*
*提取URL的搜尋字串中的引數
*這個函式用來解析來自URL的查詢串中的name=value引數對
*它將name=value對儲存在一個物件的屬性中，並返回該物件
*/
function urlArgs() {
    var args = {}
    var query = location.search.substring(1);
    var pairs = query.split("&");
    for(var i  = 0; i < pairs.length; i++) {
    var pos = pairs[i].indexOf('=');
        if (pos == -1) continue;
        var name = pairs[i].substring(0,pos);
        var value = pairs[i].substring(pos+1);
        value = decodeURLComponent(value);
        args[name] = value;
    }
    return args;
}

14.2.2載入新的文件

//如果檢查到使用者的瀏覽器不支援某些特徵來顯示功能齊全的版本，可以用location.replace()來載入靜態的HTML版本
//如果瀏覽器不支援XMLHttpRequest物件
//則將其重定向到一個不需要Ajax的靜態頁面
if(!XMLHttpRequest) location.replace("staticpage.html");

Location物件有三種方法可以使視窗載入並顯示你指定的URL中的文件。

  • assign() 使視窗載入並顯示你指定的URL中的文件
  • replace() 它在載入新文件之前會從瀏覽歷史中把當前文件刪除
  • reload() 讓瀏覽器重新載入當前文件

更傳統的方法：

  1. 直接把新的URL賦值給location屬性： 
    location = "http://www.baidu.com";

    2.把相對URL賦值給location,它們會相對當前URL進行解析：

    location = "page2.html";
//純粹的片段識別符號是相對URL的一種型別，它不會讓瀏覽器載入新文件，但會讓它滾動到文件的某個位置。#top識別符號是個特殊的例子，如果文件中沒有元素的ID是"top",它會讓瀏覽器跳到文件開始處。
location = "#top";

    3.Location物件的URL分解屬性是可寫的，對它們重新賦值會改變URL的位置，並且導致瀏覽器載入一個新的文件(如果改變的是hash屬性，則在當前文件中進行跳轉)：

    location.search = "?page=" + (pagenum+1);

相關文章