问题:现代Web应用中,用户的每次操作都不一定打开一个新的页面,但此时页面的“后退”和“前进”按钮就失去了作用,用户很难在不同状态间切换。
解决方法:hashchange事件
H5通过更新history对象添加历史状态。
效果:通过历史状态管理API,能够在不加载新页面的情况下改变浏览器的URL。
过程:
1、使用history.pushState()创建新的历史状态,但浏览器不会真的向服务器发送请求。
接收三个参数:状态对象、新状态标题、可选的相对URL
语法:history.pushState({...},title,url)
参数一:尽可能提供初始化新页面所需的各种信息。
2、按下“后退”按钮,触发window对象的popstate事件;其事件对象有一个state属性,包含着pushState()的第一个参数:状态对象。
代码:
3、更新当前状态,用replaceState(),传入的参数与pushState()的前两个参数相同。
此方法不会在历史状态栈中新建状态,而是重写当前状态。
语法:history.replaceState({...},title)