HTML5不重新加载改变url

2018-01-13

有时候想要实现无刷新改变url，尤其是在改变url后的参数时会用到。如果直接在js中修改url总是会重新加载页面，不能满足需求，而HTML5 History新增的两个api分别是pushState和replaceState可以很轻松解决这个问题。

先来介绍一下这两个API：

window.history.pushState(data, title, url)
window.history.replaceState(data, title, url)

参数说明：
data：提供state data，在用户点击后退，触发window.onpopstate时提供此对象。(object类型)
title：重写页面标题，但目前浏览器都会忽略此参数。(string类型)
url：重写url，只会更改url部分的内容，并不能更改协议、主机名、端口、IP等内容。(string类型)

有了这两个方法，改变url就会很简单，只需设置data的值为空{}、title的值为空””、url的值为新的url就可以实现。

具体实现方法：

假设当前的url为http://www.example.com?param=1，要实现不刷新页面更改参数param的值为2。(只写简单代码)

html:

<html>
    <head>
        <meta charset="utf-8" />
        <title>example</title>
    </head>
    <body>
        <div id="btn">更改url</div>
    </body>
</html>

js:

var btn = document.getElementById("btn");
btn.onclick = function(){
    var url = window.location.origin;
    var newUrl = url + '?param=2';
    window.history.pushState({}, "", newUrl);
}

当点击“更改url”这个按钮后，页面的url就会更改为www.example.com?param=2，并且不会刷新页面。

这里只给出了很简单方法，其它更改的原理都相同，只不过是对新的url做一些处理。

另附window的location对象的属性及方法

以http://www.example.com:8080/test/test.html?param=1#part2为例

1、window.location.hash 获取url的锚部分
返回：#part2

2、window.location.host 获取url的主机名及端口号
返回：www.example.com:8080

3、window.location.hostname 获取url的主机名
返回：www.example.com

4、window.location.pathname 获取url的路径部分
返回：/test/test.html

5、window.location.port 获取url的端口号
返回：8080（注意这里8080的类型是string，不是number）

6、window.location.search 获取url的参数部分
返回：?param=1

7、window.location.origin 获取主机名及端口号及路径部分
返回：http://www.example.com:8080/test/test.html

8、window.location.protocol 获取url的协议
返回：http:

9、window.location.href 获取整个url地址
返回：http://www.example.com:8080/test/test.html?param=1#part2

10、window.location.assign(“newUrl”) 加载一个新的地址
链接跳转到newUrl，可以后退到之前的url

11、window.location.reload() 重新加载当前页面
该方法内的参数默认为false，如果设置为true，会绕过缓存，重新加载整个页面

12、window.location.replace(“newUrl”) 用新的newUrl替换当前的url
无法后退到之前的url