location对象

概述

BOM对象之一，提供与当前窗口中加载的文档有关的信息，以及还提供一些导航功能。它一方面保存当前文档信息，另一方面将URL解析为可访问独立片段。它既是window对象属性又是document对象属性，即window.location === document.location

对象属性

location对象实现了URLUtils属性。

hash
- 定义: 返回URL中的hash(#号后面0或多个字符)，如果URL不包括hash，则返回空字符串。
- 例子: "#contents"
host
- 定义: 返回服务器名称和端口(如果有)
- 例子: "www.meituan.com:80"
protocol
- 定义: 返回页面所使用的协议，通常是'http:'或'https:'
- 例子: "http:"
hostname
- 定义: 返回不带端口号的服务器名称
- 例子: "www.meituan.com"
href
- 定义: 返回当前加载页面的完整URL。
- 备注
  - location对象的toString()方法也返回这个值。
  - 返回编码后的地址。
- 例子: "http://www.meituan.com/"
pathname
- 定义: 返回URL中的目录和(或)文件名,以'/'开头
- 例子: "/zh-CN/docs/Web/API/URLUtils"
search
- 定义: 返回URL的查询字符串。该字符串以问号开头。
- 例子: "?q=javascript"
port
- 定义: 返回URL中指定的端口号。如果URL中不包含端口号，则这个属性返回空字符串。
- 例子: "8080"
origin
- 定义: 返回URL的协议、服务器以及端口
- 例子: 'http://www.meituan.com:8080'

// 查询字符串参数
function getQueryStringArgs(){
    // 获取去掉?的查询参数
    var qs = (location.search.length > 0 ? location.search.substring(1) : "");
    var args = {}; //数据对象
    var items = qs.length > 0 ? qs.split('&') : [];
    for(var i = 0; i < items.length; i++){
        args[items[i].split('=')[0]] = decodeURIComponent(items[i].split('=')[1]);
        console.log(items[i].split('=')[0] + ':' + decodeURIComponent(items[i].split('=')[1]));
    }
    return args;
}


// URLSearchParams:keys(),values(),entries()
var paramsObj = new URLSearchParams(location.search);
paramsObj.toString();
for(var pair of paramsObj.entries()) {
    console.log(pair[0]+ ', '+ pair[1]);
};

对象方法

location对象实现了URLUtils方法。除toString之外这些方法都用来改变浏览器位置。

assign
- 定义: 加载URL的内容资源到这个Location对象所关联的对象上。
- 使用: location.assign(url)
- 备注
  - 打开一个新URL并在浏览器里是记录中生成一条记录。
  - location.href='urlX'和window.location='urlX'会以url为'urlX'调用assign()方法。即window.location='www.meituan.com'和location.href='www.meituan.com'效果相同
reload
- 定义: 重新加载来自当前URL的资源。
- 使用: reload(flag)
- 备注
  - 其具有一个可选参数,类型为boolean,该参数为true时会从服务器加载数据进行刷新，参数为false时浏览器从缓存加载页面。
  - 如果不传递参数，则页面会以最有效的方式重新加载(即如果页面自上次请求以来并没有改变过则从缓存重新加载)。
replace
- 定义: 用给定的URL替换当前的资源。
- 使用: replace(url)
- 备注
  - 替换的新页面不会保存在history中。
toString: 返回一个字符串，包含整个URL。效果同location.href,但不能修改location的值。

PS

改变浏览器位置方法一般常用location.href
在IE8，FF1，Safari 2+，Opera 9+ 和Chrome中，修改hash会在浏览器的历史记录中生成一条新纪录。
修改location中的其他属性也会改变当前加载的页面。并且每次修改location属性(除hash外)页面都会以新URL重新加载。

安全设置如(CORS:跨域资源共享)可能会限制实际加载页面。

location.hash = '#section1';
location.search = '?q=javascript';
location.hostname = 'www.meituan.com';
location.pathname = 'mydir';    location.port = 8080;

window.location与document.location

定义: window.location和document.location是一个只读属性，返回一个location对象，包含文档当前地址的相关信息。但是可以赋值给window.location。
```
 window.location = 'http://www.meituan.com';   // location = 'http://www.meituan.com'; 
 alert(window.location); 
```
语法: var oldLocation = window.location; window.location = newLocation
- oldLocation是一个location对象，提供了当前文档URL的相关信息以及几个用来改变这个URL的方法。
- newLocation可以是一个location对象，但通常是字符串，指定要跳转的URL地址。

location对象

概述

对象属性

对象方法

PS

window.location与document.location

参考文献