location对象

location——BOM对象之一，既是window对象的属性，又是document对象的属性，即：

location.jpg

window.location == document.location 结果为true

window.location == location 结果为true

所以使用的时候windowo.location/document.location/location都可以

功能

提供与当前窗口中加载的文档有关的信息
提供导航功能

属性

属性说明

属性名	说明
hash	返回URL中的#号后的多个字符，如果URL中不包含散列，则返回空字符串
host	返回服务器名称+端口号
hostname	返回不带端口号的服务器名称（主机名）
href	返回当前加载页面的完整URL （`location.toString() == location.href 结果为true`）
pathname	返回URL中的目录+文件名（去掉主机名和端口号的路径地址）
port	返回端口号，如果没有端口号返回空字符串。端口号是我的电脑和外界进行沟通的路径之一。一个主机可以有很多端口号
protocol	返回使用的协议`http or https or thunder://`
search	返回URL中的查询字符串，搜索内容，这个字符串以问号开头
origin	返回URL协议+服务器名称+端口号（`location.origin == location.protocol + '//' + location.host`）

两个从控制台可以看到对应的内容，origin单独附在后面，即：

location.png

location1.png

location2.png

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

百度搜索简书的连接

baidu.png

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')；

location.assign('http://www.baidu.com') = location.href='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属性
version1.2 —— 2018/9/12，修改一些细节部分
©burning_韵七七