小墨の博客

网页中，不刷新页面修改url

//前两个参数可省略
history.pushState('','',newUrl);
history.replaceState('','',newUrl);

相关MDN文档如下

History.pushState()

MDN文档（中文）：https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState

History.replaceState()

MDN文档（中文）：https://developer.mozilla.org/zh-CN/docs/Web/API/History/replaceState

History的所有API用法MDN文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/History

以下参考：https://www.cnblogs.com/wuting/p/8946927.html

pushState与replaceState

两者都是html5的新特性，支持IE10以上，都有三个参数：

以history.pushState(state,title,url)为例：

（1）state：存储JSON字符串，可以用在popstate事件中。

（2）title：现在大多数浏览器不支持或者忽略这个参数，最好用null代替。

（3）url：任意有效的URL，用于更新浏览器的地址栏，并不在乎URL是否已经存在地址列表中。更重要的是，它不会重新加载页面。

两者的区别：

pushState()是在history栈中新建一个历史记录，而replaceState()是替换当前记录；

popState

(1) popstate事件的state属性会包含历史项(history entry)状态对象(state object)的拷贝。

(2) 调用history.pushState()或history.replaceState()不会触发popstate事件。当浏览器做出动作时，才会触发该事件，如用户点击浏览器的回退按钮或者在Javascript代码中调用history.back()；

window.onpopstate = function(e){

　　console.log(e);

}

或者 window.addEventListener('popstate',function(e){

　　console.log(e);

},false);

ajax请求后，浏览器点回退按钮是无法回退到ajax请求前的状态的，如果用pushState新增一个history记录，再用popstate进行页面回退，需要注意利用js控制点击事件（即非用户手动点击）时，需要判断是popstate导致的click事件还是用户手动点击的click事件,避免回退按钮需要点击多次才回退成功；（这里记忆尤新啊！！）

张小弟之家