利用history.pushState()实现页面无刷新更新

本来是在研究vue-router如何记录滚动位置，点返回的时候还是回到原来的位置，看到有人说的history.state存了一个值，才把history研究一下，发现 history.pushState() 可以实现无刷新的更新，还是非常棒的，

下面有我自己写的例子：

在 HTML 文件中, history.pushState() 方法向浏览器历史添加了一个状态。

pushState() 带有三个参数：一个状态对象，一个标题（现在被忽略了），以及一个可选的URL地址。下面将对这三个参数进行细致的检查：

state object — 状态对象是一个由 pushState()方法创建的、与历史纪录相关的JS对象。当用户定向到一个新的状态时，会触发popstate事件。事件的state属性包含了历史纪录的state对象。（译者注：总而言之，它存储JSON字符串，可以用在popstate事件中。）state 对象可以是任何可以序列化的东西。由于火狐会将这些对象存储在用户的磁盘上，所以用户在重启浏览器之后这些state对象会恢复，我们施加一个最大640k 的字符串在state对象的序列化表示上。如果你像pushState() 方法传递了一个序列化表示大于640k 的state对象，这个方法将扔出一个异常。如果你需要更多的空间，推荐使用sessionStorage或者localStorage。
title — 火狐浏览器现在已经忽略此参数，将来也许可能被使用。考虑到将来有可能的改变，传递一个空字符串是安全的做法。当然，你可以传递一个短标题给你要转变成的状态。（译者注：现在大多数浏览器不支持或者忽略这个参数，最好用null代替）
URL — 这个参数提供了新历史纪录的地址。请注意，浏览器在调用pushState()方法后不会去加载这个URL，但有可能在之后会这样做，比如用户重启浏览器之后。新的URL不一定要是绝对地址，如果它是相对的，它一定是相对于当前的URL。新URL必须和当前URL在同一个源下;否则，pushState() 将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前URL。

语法 history.pushState(state, title, url);

<div class="wrap">
　　<div onClick="jump('area=minhang')">跳转minhang</div>
　　<div onclick="jump('area=baoshan')">跳转baoshan</div>
　　<div onclick="jump('area=pudong')">跳转pudong</div>
　　<div onclick="jump('area=songjiang')">跳转songjiang</div>
</div>
<script type="text/javascript">
　　window.onload=function(){
　　　　var len = window.location.href.split('?')[1];
　　　　　　if(!len){
　　　　　　　　location.href=window.location.href+'?area=minhang';
　　　　　　　　}
　　　　　}
　　　　function jump(param){
　　　　　　var title = "上海3月开盘项目汇总";
　　　　　　history.pushState({ title: title }, title, location.href.split("?")[0] + "?" + param);
　　　　　　var current=window.location.href.split('?')[1];
　　　　　　　　switch (current)
　　　　　　　　　　　　{
　　　　　　　　　　　　case "area=minhang":
　　　　　　　　　　　　alert('1')
　　　　　　　　　　　　break;
　　　　　　　　　　　　case "area=baoshan":
　　　　　　　　　　　　alert('2')
　　　　　　　　　　　　break;
　　　　　　　　　　　　case "area=pudong":
　　　　　　　　　　　　alert('3')
　　　　　　　　　　　　break;
　　　　　　　　　　　　case "area=songjiang":
　　　　　　　　　　　　alert('4')
　　　　　　　　　　　　break;
　　　　　　　　　　　　}
　　　　　　}
</script>

关于history对象一个介绍比较好的文章（http://javascript.ruanyifeng.com/bom/history.html）

巴特西

利用history.pushState()实现页面无刷新更新

最新文章

热门文章