JavaScript浏览器之location-原创手记-慕课网

基本概念

location对象保存了与当前窗口加载的文档有关的信息，而且可以将URL解析为独立的片段。它既是window对象的属性，也是document对象的属性，document.location与window.location引用的是同一个对象。

location对象常用的属性

location.hash：返回或设置一个URL的锚部分（#号后跟零或多个字符）
location.host：返回或设置一个URL的服务器名和端口号
location.hostname：返回或设置URL的服务器名
location.href：返回或设置完整的URL（location.toString()也返回这个值）
location.pathname：返回或设置URL的目录和文件名
location.port：返回或设置一个URL服务器使用的端口号
location.protocol：返回或设置一个URL协议（http:或https:）
location.search：返回或设置URL的查询字符串，这个字符串以问号开头

为了方便逐个访问location.search中的字符串参数，可以通过下面的函数解析字符串返回一个对象。

代码如下：

function getSearchArgs(){
    var qs=(location.search.length>0?location.search.substring(1):""),
        args={},
        item=null,
        items=qs.length?qs.split("&"):[],
        len=items.length;
    for(var i=0;i<len;i++){
        item=items[i].split("=");
        name=encodeURIComponent(item[0]);
        value=encodeURIComponent(item[1]);
        if(name.length){
            args[name]=value;
        }
    }
    return args;
}

location对象常用的方法：浏览器的重定向

1、location.assign(URL)：加载一个新的文档并在浏览器的历史记录中生成一条记录。
如果将location.href或window.location设置为一个URL值，与assign()方法的效果一样。

测试代码：

setTimeout(function(){location.assign("https://www.baidu.com/")},2000)
setTimeout(function(){location.href="https://www.baidu.com/"},2000)
setTimeout(function(){window.location="https://www.baidu.com/"},2000)

2、location.reload(Boolean)：用于刷新当前文档。
如果把该方法的参数设置为true，那么浏览器会绕过缓存，从服务器上重新下载该文档。

测试代码：

<h1>100</h1>
<button>Reload</button>

setInterval(
        function(){
            document.querySelector("h1").firstChild.data-=1
        },
        1000)
document.querySelector("button").onclick=function(){
    location.reload();
}

3、location.replace(newURL)：用一个新文档取代当前文档。
这个方法虽然会导致浏览器的重定向，但不会在历史记录中生成记录，所以用户不能回到前一个页面。

测试代码：

setTimeout(function(){location.replace("https://www.baidu.com/")},2000)

4、修改location对象的host、hostname、pathname、port、protocol、search属性，页面也会以新URL重新加载，并在浏览器的历史记录中生成一条记录。修改hash属性会在浏览器的历史记录中生成一条记录，但不会以新URL重新加载页面。

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。

JavaScript浏览器之location原创