history浏览器历史和window.onpopstate

history

DOM window对象通过history对象提供了对浏览器历史的访问。它暴露了很多有用的方法和属性,允许你在用户浏览历史中向前和向后跳转,同时,从HTML5开始提供了对history栈中内容的操作。

History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
History对象属性

属性描述
length返回浏览器历史列表中的 URL 数量。

History 对象方法

方法描述
back()加载 history 列表中的前一个 URL。
forward()加载 history 列表中的下一个 URL。
go()加载 history 列表中的某个具体页面。

History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因,History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

html5新特性:利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题

使用ajax,可以实现不需要刷新整个页面就可以进行局部页面的更新。这样可以开发交互性很强的富客户端程序,减少网络传输的内容。但长期以来存在一个问题,就是无法利用浏览器本身提供的前进和后退按钮进行操作。比如在页面执行某个动作,该动作利用ajax请求到服务器获取数据,更新了当前页面的某些内容,这时想回到操作前的界面,用户就会习惯点击浏览器的后退按钮,实际这里是无效的。
HTML5引入了histtory.pushState()和history.replaceState()这两个方法,它们会更新history对象的内容。同时,结合window.onpostate事件,就可以解决这个问题。

pushState接受3个参数
1)第一个参数是个js对象,可以放任何的内容,可以在onpostate事件中(后面介绍)获取到便于做相应的处理。

2)第二个参数是个字符串,目前好像没有起作用,可以传个空串。

3)第三个参数是个字符串,就是保存到history中的url。
pushState的作用是修改history历史,当调用方法时,将当前url存入history栈中,并在地址栏中显示参数中的url,但是并不会加载新的url。
replaceState的参数和pushState相同,但是调用时并不会将旧url存入history,而是将history中的url替换为参数中的url。

popstate事件在浏览器前进、后退时会触发,配合pushState和replaceState,可以解决使用ajax的页面前进后退的问题。具体解决方案是在触发ajax事件时同时调用pushState事件修改url信息,当popState 被触发时,同时调用history事件,根据当前url的不同,调用ajax事件恢复对应的状态。

location.assign和location.replace

如果是想在切换url的同时加载url,则可以使用location.assign和location.replace方法
window.location.assign(url) : 加载 URL 指定的新的 HTML 文档。 就相当于一个链接,跳转到指定的url,当前页面会转为新页面内容,可以点击后退返回上一个页面。
window.location.replace(url) : 通过加载 URL 指定的文档来替换当前文档 ,这个方法是替换当前窗口页面,前后两个页面共用一个

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复