让 Ajax 支持浏览器的前进后退

May 01 2016 前端

众所周知,Ajax可以实现网页的局部刷新,但与此同时,Ajax会破坏浏览器历史的前进后退。为了让Ajax也能支持浏览器的前进后退,HTML5的history API中定义了一系列方法,其中pushState就是来解决这个问题的。

来看看这几个API

  1. history.pushState(state, title, url)
    pushState 是人工插入历史记录和修改地址栏,此时地址栏虽然修改,但并不触发网页跳转,换句话说就是给你看的而已,第一个参数是一个对象,你可以放入需要的参数,第二个标题名称,第三个就是url.这是地址栏里显示的东西.
  2. window.onpopstate
    用户点击浏览器历史前进后退按钮,并且页面无刷的时候(由于使用pushState修改了history)会触发popstate事件,事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。
  3. history.replaceState(state,title,url)
    用新的state和URL替换当前。不会造成页面刷新。
    state:与要跳转到的URL对应的状态信息。
    title:标题
    url:要跳转到的URL地址,不能跨域。

实现原理如下:

除此之外,单页应用处理路由还可以监听onhashchange事件,只要hash值一改变就会触发该事件。Angular的路由机制就同时利用了这两种方案。


欢迎关注我博客:http://voidman.xyz

JavaScript