JavaScript之Location對象

location——BOM對象之一，既是window對象的屬性，又是document對象的屬性，即： window.location == document.location 結果爲true

功能

• 提供與當前窗口中加載的文檔有關的信息
• 提供導航功能

屬性

屬性說明

屬性名	說明
hash	返回URL中的#號後的多個字符，若是URL中不包含散列 ，則返回空字符串
host	返回服務器名稱+端口號
hostname	返回不帶端口號的服務器名稱
href	返回當前加載頁面的完整URL （location.toString() == location.href 結果爲true）
pathname	返回URL中的目錄+文件名
port	返回端口號，若是沒有端口號返回空字符串
protocol	返回使用的協議http or https
search	返回URL中的查詢字符串，這個字符串以問號開頭
origin	返回URL協議+服務器名稱+端口號 （location.origin == location.protocol + '//' + location.host）

origin的兼容性說明

origin不兼容IE8，因此要使用這個屬性就要進行兼容性處理

var baseUrl;
if (typeof location.origin === ‘undefined‘)
{
   baseUrl = location.protocol + '//' + location.host;
}
else
{
   baseUrl = window.location.origin;
}
複製代碼

屬性使用

1. 獲取地址欄傳來的參數數據

定義函數獲取根據參數的鍵得到參數的值

function getQueryStringArgs(){
          //取得查詢字符串並去掉開頭的問號
          var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
          //保存數據的對象
              args = {},
          //取得每一項
              items = qs.length ? qs.split("&") : [],
              item = null,
              name = null,
              value = null,
              
          //在for循環中使用
              i = 0,
              len = items.length;
        
          //逐個將每一項添加到args對象中
            for(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;
      }
複製代碼

調用函數獲取值

//假設字符串是?name=xiaoming&age=18
var args = getQueryStringArgs();
console.log(args.name)   //xiaoming
console.log(args.age)    //18
複製代碼

試驗一下百度搜索簡書的鏈接

2. 跳轉頁面(除了修改hash，其他都會跳轉頁面)

如下的方式修改URL之後，瀏覽器的歷史記錄中就會生成一條新紀錄，所以用戶經過單擊‘後退’按鈕都會導航到前一個頁面。

//修改location對象的屬性均可以改變當前加載的頁面，
location.href = 'https://www.baidu,com';
window.location = 'https://www.baidu.com';
//上面的兩種效果都是同樣的
// 假設域名爲https://www.baidu.com/abcd

location.hash = '#section1';
// URL 爲  https://www.baidu.com/abcd/#section1

location.search = '?q=javascript';
// URL 爲 https://www.baidu.com/?q=javascript#section1

location.hostname = 'www.google.com';
// URL 爲 https://www.google.com/abcd/?q=javascript#section1

location.pathname = 'mydir';
// URL 爲 https://www.google.com/mydir/?q=javascript#section1

location.port = 8080';
// URL 爲 https://www.google.com:8080/mydir/?q=javascript#section1


複製代碼

方法

方法說明

方法名	說明
assign()	跳轉連接，當即打開新的URL並在瀏覽器的歷史記錄中生成一條記錄，回退可返回
replace()	跳轉連接，當即打開新的URL，不會在歷史記錄中生成一條記錄，回退不可返回
reload()	從新加載當前顯示的頁面： 參數：無 —— 就會使用最有效的方式從新加載頁面，可能從瀏覽器緩存中從新加載。 參數：true —— 那麼就會強制從服務器從新加載。

方法使用

assign()

location.assign('http://www.baidu.com')；
複製代碼

注：若是是修改window.location和location.href，也會以修改的值去調用assign()，效果是徹底同樣的。

replace()不可跳轉

location.replace('http://www.baidu.com');
複製代碼

reload()

location.reload();  //有可能從緩存中加載
  location.reload(true);  //從服務器從新加載
複製代碼

version1.0 —— 2018/4/16，首次建立location對象的理解。
version1.1 —— 2018/4/21，添加origin屬性
©burning_韻七七