历史状态管理
2017-08-04 13:57
218 查看
hashchange事件
通过hashchange事件,可以知道URL的参数什么时候发生了变化,而通过状态管理API,能够在不加载新页面的情况下改变浏览器的URL。为此,需要使用history.pushState()方法,该方法接受三个参数:状态对象、新状态的标题和可选的相对URL
执行pushState()方法后,新的状态信息就会被加入到历史状态栈,而浏览器地址栏会变成新的相对URL。但是,浏览器并不会真的向服务器发送请求,即使状态改变之后查询location.href也会返回与地址栏中相同的地址。另外,第二个参数目前还没有浏览器实现,因此,完全可以只传入一个空字符串,或者一个短标题也可以。而第一个参数则应该尽可能提供初始化页面状态所需的各种信息。
因为pushState()会创建新的历史状态,所以你会发现”后退”按钮也能使用了。按下“后退”按钮,会触发window对象的popstate事件。popstate事件的时间对象有一个state属性,这个属性就包含这当初以第一个参数传递给pushState()的状态对象。
要更新当前状态,可以调用replaceState(),传入的参数与pushState()的前两个参数相同。调用这个方法不会再历史状态栈中创建新状态,只会重写当前状态。
在使用HTML5的状态管理机制时,请确保使用pushState()创建的每一个“假”URL,在web服务器上都有一个真的、实际存在的URL与之对应。否则,单击“刷新”按钮会导致404错误
通过hashchange事件,可以知道URL的参数什么时候发生了变化,而通过状态管理API,能够在不加载新页面的情况下改变浏览器的URL。为此,需要使用history.pushState()方法,该方法接受三个参数:状态对象、新状态的标题和可选的相对URL
history.pushState({name: "Nicholas"}, "Nicholas page", "nicholas.html")
执行pushState()方法后,新的状态信息就会被加入到历史状态栈,而浏览器地址栏会变成新的相对URL。但是,浏览器并不会真的向服务器发送请求,即使状态改变之后查询location.href也会返回与地址栏中相同的地址。另外,第二个参数目前还没有浏览器实现,因此,完全可以只传入一个空字符串,或者一个短标题也可以。而第一个参数则应该尽可能提供初始化页面状态所需的各种信息。
因为pushState()会创建新的历史状态,所以你会发现”后退”按钮也能使用了。按下“后退”按钮,会触发window对象的popstate事件。popstate事件的时间对象有一个state属性,这个属性就包含这当初以第一个参数传递给pushState()的状态对象。
window.addEventListener('popstate', function(event){ var state = event.state; if (state){ // 第一个页面加载时state为空 processState(state) } })
要更新当前状态,可以调用replaceState(),传入的参数与pushState()的前两个参数相同。调用这个方法不会再历史状态栈中创建新状态,只会重写当前状态。
在使用HTML5的状态管理机制时,请确保使用pushState()创建的每一个“假”URL,在web服务器上都有一个真的、实际存在的URL与之对应。否则,单击“刷新”按钮会导致404错误
相关文章推荐
- js中的历史状态管理方法总结
- HTML5 脚本编程之:跨文档消息传递&历史状态管理
- 单页面 历史状态管理
- 解决ajax浏览器历史状态管理
- HTML5历史状态管理history API-pushState/replaceState与popstate事件
- 电源管理-电压状态划分
- ASP.NET 状态管理总结(ASP.net)
- VMware 主机基板管理控制器的状态
- 使用管理中心管理网站集的锁定状态 使用 Windows PowerShell 管理网站集的锁定状态
- 精力管理与状态转换
- 为品牌管理增加检索名称和状态项
- Opengl编程指南第二章:状态管理、几何绘图
- Jsp状态管理、Cookie与session
- Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)
- 转 ASP.NET状态管理
- 如何高效撤销Git管理的文件在各种状态下的更改 ?
- 自定义视图状态管理
- 浅谈思路严谨的管理软件中的用户在线状态控制【附部分C#参考代码】
- linux 命令操作 历史管理
- 编程高手 ASP.NET 状态管理