history.pushState实现改变浏览器地址栏url不刷新页面

js改变浏览器地址栏url不刷新页面

想改变地址栏且不刷新页面，HTML5为history对象添加了两个新方法，history.pushState()和history.replaceState()，用来在浏览历史中添加和修改记录，在这里正好用到的就是history.pushState()。

history.pushState()主要是在不刷新浏览器的情况下，创建新的浏览记录并插入浏览记录队列中。

 var stateObject = {};	//--stateObject是一个JavaScript对象
 var title = "";	//几乎没有浏览器支持该参数，但是传一个空字符串会比较安全。
 var newUrl = "";	//新的历史记录条目的地址（可选，不指定的话则为文档当前URL）；
 history.pushState(stateObject, title, newUrl);

这里要注意的是 newUrl，浏览器在调用pushState()方法后不会加载该地址；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。
for example

history.pushState({}, '', 'data=1');

如果原地址是https://www.baidu.com，则触发改变后，你会发现地址为https://www.baidu.com?data=1，且页面没有刷新。当然也可以跳完整地址，但不可跨域。