history.pushState() 给网站添加和修改浏览历史记录
假设一个使用场景：后台管理系统项目，左右固定布局。左侧是通用布局，右侧页面是通过ajax切换的当我们切换菜单后，想返回上一页，通常点击浏览器自带的回退。会发现回退的不是上一页，而是最开始打开这个项目的那一页。并且当我们刷新当前页面。也会自动回退到最初始的页面原因：我们切换菜单的时候并没有跳转页面，只是用过ajax把我们想要的那也插在右侧DIV中。没有跳转页面就意味着浏览器没有存下历...
假设一个使用场景：
后台管理系统项目，左右固定布局。左侧是通用布局，右侧页面是通过ajax切换的
当我们切换菜单后，想返回上一页，通常点击浏览器自带的回退。会发现回退的不是上一页，而是最开始打开这个项目的那一页。并且当我们刷新当前页面。也会自动回退到最初始的页面
原因：我们切换菜单的时候并没有跳转页面，只是用过ajax把我们想要的那也插在右侧DIV中。没有跳转页面就意味着浏览器没有存下历史记录。
解决办法：
每次调用ajax的时候，并且调用成功，我们都在内部加上这个 history.pushState()方法
history.pushState方法接受三个参数，依次为：
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
假定当前网址是example.com/1.html，我们使用pushState方法在浏览记录（history对象）中添加一个新记录。
var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');
这样地址栏就可以看到我们自己存的标识了。历史记录也就存进去了
举个栗子：
快速构建 Web 应用程序
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)