document 对象和window对象的location的区别

document对象的位置获取步骤是返回这个相关的全局对象的位置对象，如果这是完全活动的，否则为空。

Window对象的位置获取步骤是返回它的位置对象。每个Window对象都与创建Window对象时分配的Location对象的唯一实例相关联。

location

位置对象提供其关联文档的URL的表示，以及导航和重新加载关联的可导航文件的方法。

属性总览

属性名	值
href	返回位置对象的URL。可以设置，以导航到给定的URL
origin	返回位置对象的URL的起源
protocol	返回位置对象的URL的方案。可以设置，以导航到相同的URL与一个改变的方案。
host	返回Location对象的URL的主机和端口（如果与方案的默认端口不同）。可以设置，以导航到与已更改的主机和端口相同的URL。
hostname	返回位置对象的URL的主机。可以设置，以导航到具有已更改的主机的相同URL
port	返回位置对象的URL的端口。可以设置，以导航到相同的URL与一个改变的端口
pathname	返回位置对象的URL的路径。可以设置，导航到相同的URL与一个改变的路径
search	返回位置对象的URL的查询(包括前导的“？”如果为非空的）。可以设置，通过更改的查询导航到相同的URI
hash	返回Location对象的URL片段（如果为非空，则包括前导“#”）。可以设置，导航到相同的URL与一个改变的片段
assign(url)	导航到给定的URL
replaace(url)	从会话历史记录中删除当前页面，并导航到给定的URL
reload()	重新加载当前页面。
ancestorOrigins	返回一个DOMStringList对象，其中列出了祖先可导航的活动文档的起源

基本示例

location.href：返回位置对象的URL。可以设置，以导航到给定的URL

console.log(location.href);

location.protocol：返回位置对象的URL的方案。可以设置，以导航到相同的URL与一个改变的方案。也就是返回当前网址的协议。

console.log(location.protocol);

location.host：返回Location对象的URL的主机和端口（如果与方案的默认端口不同）。可以设置，以导航到与已更改的主机和端口相同的URL。

console.log(location.host);

location.hostname：返回位置对象的URL的主机。可以设置，以导航到具有已更改的主机的相同URL

console.log(location.hostname);

location.port：返回位置对象的URL的端口。可以设置，以导航到相同的URL与一个改变的端口

console.log(location.port);

URL是http://localhost:8088/，返回的值

location.hash：返回Location对象的URL片段（如果为非空，则包括前导“#”）。可以设置，导航到相同的URL与一个改变的片段

console.log(location.hash);

URL是http://localhost:8088/#index，返回的值

location.search：|返回位置对象的URL的查询(包括前导的“？”如果为非空的）。可以设置，通过更改的查询导航到相同的URL（忽略前导“？”）

console.log(location.search);

URL是http://localhost:8088/?name=hello，返回的值

assign(url)：导航到给定的URL

<button id="link_btn">点击跳转页面</button>

 let linkBtn = document.getElementById('link_btn');
  linkBtn.addEventListener('click', () => {
    location.assign('http://www.baidu.com');
  });

当我们点击按钮的时候，会跳转到百度页面。

replace(url)：从会话历史记录中删除当前页面，并导航到给定的URL

 let linkBtn = document.getElementById('link_btn');
  linkBtn.addEventListener('click', () => {
    location.assign('http://www.baidu.com');
  });

当我们点击按钮的时候就会跳转到百度页面，同时我们看浏览器导航的回退按钮仍然是灰色的即没有可以回退的记录，就说明当前URL是替换了之前的浏览记录，不是产生新的记录。

location.relaod()：重新加载当前页面。

let linkBtn = document.getElementById('link_btn');
  linkBtn.addEventListener('click', () => {
    location.reload();
  });

当我们点击按钮的时候，会重新加载当前页面，即当前页面会有一个刷新的过程。

以上就是location的基本的属性的示例。