Re:从零开始的实习生活04----盘点window对象中location和history

最近开始移动端页面的时候，被window.location和window.history坑了一把，于是决定对这两个对象进行一个全面的剖析。下面进行我们的正文…

location

首先介绍的是location对象，location是BOM对象中最常用的一个对象之一，它提供了与当前窗口中加载的文档的有关的信息，还提供了一些导航的功能。说到这里，其实location是一个非常的特别的对象，因为window.location===document.location.另外location对解析URL非常的有帮助，下面看一下location的属性表。

以此例子：http://www.google.com:8080/loanOrder/detail?orderId=1236#type (注：随便打的)

属性名	例子	说明
hash	“#type”	设置或返回URL中的#后面的hash值，如果没有则为”“
host	“www.google.com:8080”	设置或返回URL中的主机名称和端口号
hostName	“www.google.com”	设置或返回URL中的主机名称
href	“http://www.google.com:8080/loanOrder/detail?orderId=1236#type”	设置或返回完整的URL
pathname	“/loanOrder/detail”	设置或返回当前 URL 的路径部分
port	“8080”	设置或返回URL中的端口号，如果URL中没有端口号，则为”“
protocol	“http:”	设置或返回当前 URL 的协议，通常是http:或https:
search	“?orderId=1236”	返回URL的查询字符串。这个字符串以”?”开头

location属性表

---

接下来我们说说，基于location对象我们常用的一些操作。

1.查询字符串参数

function getArgsQuery() {
        //取得查询字符串并去掉"?"
        var searchStr=window.location.search.length>0?window.location.search.substring(1):"";
        //将每一项集成到数组中
        var searchStrArray=searchStr.length>0?searchStr.split("&"):[];
        //存储最后返回的对象
        var args={};
        searchStrArray.forEach(function (item) {
            //属性
            var name=decodeURIComponent(item.split("=")[0]);
            //值
            var value=decodeURIComponent(item.split("=")[1]);
            args[name]=value;
        });
        return args;
    }

2.改变游览器的位置

1) window.location.reload() //重新加载页面

在调用reload()不传任何参数时，页面自上次请求以来并没有改变过，页面就会从游览器缓存中加载，如果传入参数true时，页面会强制从服务器重新加载。

例：
 window.location.reload()  //重新加载（有可能从缓存中加载）
 window.location.reload(true) //重新加载(从服务器重新加载)

2) window.location.assign(url); //加载新的文档

与 window.location.assign(url)效果一样的还有

 - window.location.href=url;
 - window.location=url;

3) window.location.replace(url); //用新文档替换当前文档

同样是加载新文档，区别就是window.location.assign(url)是可以从新文档再回到当前文档，但是window.location.replace(url)就不行了，用来实现过渡页面时非常好用，但是有些webview却是不支持的，比如小编在开发的钉钉上的微应用的时候就遇到这个，这时我们该如何做呢？下面就是我们讲到的history对象。

history

History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。这三个也非常简单，我就随便写几个例子，意思一下。

例子：

    window.history.go(-2);  //后退两页   
    window.history.go(-1);  //后退一页   
    window.history.go(1);   //前进一页
    window.history.go(2);   //前进两页

    window.history.back();//后退一页
    window.history.forward();//前进一页

这里要说一下的是window.history.go(),我在查阅资料的时候发现window.history.go()是可以传一个字符串参数的，此时的游览器会跳转到历史记录中包含该字符串的第一个位置（可能前进可能后退）。小编一开始却是也不知道这个，就自己试了一下，但是页面就刷新了一下，并没有匹配到页面，小编试了好几次，也换了好几个游览器也没有成功，如果其他小伙们成功，还望留言告知。

---

上面三个方面相信很多人都知道，但是小编要介绍的是下面这两个方法：window.history.pushState()和 window.history.replaceState().

1) window.history.pushState(stateObject,title,url )

将当前URL和history.state加入到history中，并用新的state和URL替换当前，不会造成页面刷新。

--参数解释
stateObject //与要跳转到的URL对应的状态信息，没有特殊的情况下可以直接传{}
title       //现在大多数浏览器不支持或者忽略这个参数，我们在用的时候建议传一个空字符串
url         //这个参数提供了新历史纪录的地址,它不一定要是绝对地址，也可以是相对的，不可跨域

2) window.history.replaceState(stateObject,title,url)

用新的state和URL替换当前，不会造成页面刷新。

--参数解释
stateObject //与要跳转到的URL对应的状态信息，没有特殊的情况下可以直接传{}
title       //现在大多数浏览器不支持或者忽略这个参数，我们在用的时候建议传一个空字符串
url         //这个参数提供了新历史纪录的地址,它不一定要是绝对地址，也可以是相对的，不可跨域

有些小伙伴们看到这里可能对stateObject这个参数不太清楚，下面我们举个例子来体会这个stateObject是怎么回事。说到这个，我先说一下popstate事件，这个事件是干嘛的，或者怎样才能触发的，官方给我们的答案是：

popstate每次活动历史记录条目在同一文档的两个历史记录条目之间改变时，将事件分派到窗口。

可能很多人跟我一样，看到这个解释的时候一脸懵逼的，那我们就简单的，哪些方法可以触发这个popstate事件。下面打开这个链接https://www.lagou.com/gongsi/j35166.html（这个是拉勾网上我的公司主页链接，顺道帮忙打个广告），在控制台我们执行下面这段代码看看。

window.onpopstate = function(event) {
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
window.history.pushState({name:"阿里巴巴"}, "", "347.html");
window.history.pushState({name: "支付宝"}, "", "164268.html");
window.history.replaceState({name: "华为"}, "", "j87078.html");

window.history.back(); // alert "location: https://www.lagou.com/gongsi/347.html, state: {"name":"阿里巴巴"}"
console.log(window.history.state);//{name:"阿里巴巴"}

window.history.back(); // alert "location: https://www.lagou.com/gongsi/35166.html, state: null
console.log(window.history.state);//null

window.history.go(2);  // alert "location: https://www.lagou.com/gongsi/j87078.html, state: {"name":"华为"}
console.log(window.history.state);//{name:"华为"}

相信执行这段代码之后，你就更好理解了，没什么是执行一次代码不能解决的，如果有那就多执行几次。
回到前面我抛出的问题，怎么替代window.location.replace()方法，可能不少小伙们已经知道了，不知道的小伙们，我就贴一下例子：

/*
    可能还有其他的方法，如果有欢迎留言交流
    这里我依旧拿https://www.lagou.com/gongsi/j35166.html举例
    打开控制台，输入下面这段代码。
*/
history.replaceState({name: "华为"}, "", "j87078.html");
window.location.reload();

/*
执行完之后，我们发现不能回退了，是不是就跟window.location.replace()实现同样的效果了。
*/

结语： 没什么是执行一次代码不能解决的，如果有那就多执行几次。