HTML 5的革新—— history

一直以来对 window.history 不是很了解,直到听说 pjax 。此技术利用 history 新增的几个方法,实现了ajax长久以来的一直存在的问题,刷新页面就不是之前看到的页面了和不能使用浏览器的前进后退功能。所以搜索+摘抄window.history相关知识点。

HTML5之前的 window.history

在HTML5之前的 window.history之前,window.history 有一个属性,三个对象,如下列表:

  • length:浏览器当前标签页浏览页面的数量,载入页面后 length==1
  • back() :相当于浏览器 后退 键
  • forward():相当于浏览器 前进 键
  • go(num):num < 0,则后退 num 个地址;num > 0,则前进 num 个地址;num == 0,则刷新当前页。

ps:可以使用history.go(0)来刷新页面,跟 location.reload()效果类似,相当于按下 F5;而location.replace(location.href) 则是替换当前访问的页面,相当于 ctrl + F5。

HTML5 中 window.history 新增的方法

HTML5 扩展了window.history,我们可以存储当前和替换当前历史记录点、监听历史记录变换。如下:

    :往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会忽略此参数;url为页面地址,可选,缺省为当前页地址。
    :更改当前的历史记录,参数同上。
    :用于存储以上方法的data数据,不同浏览器的读写权限不一样。

  • history.pushState(data, title [, url]):操作跟数组的push()方法(入栈),往window.history里推入一个历史记录点
    window.history.pushState({time:new Date().getTime()},"not work",url);
    			

    第一个参数:存放当前历史记录的对象,如果为空,则在监听历史记录, onpopstate 事件下无访问的数据;

    第二个参数:页面标题,目前貌似浏览器都不支持

    第三个参数:url为页面地址,默认是当前页地址,必须同域。

  • history.replaceState(data, title [, url]):参数跟pushState()一样,不同的是此方法 替换了当前的历史记录。
  • history.state:用于存储以上方法的存入的数据对象。

利用以上知识点,做了简易pjax页面。注意点如下几点:

  • 除了刷新行为使用 replaceState 操作历史记录,其他用户行为都该使用 pushState 。不理解的,自己去打开其他页面,返回、前进、刷新,体会一下。
  • 现在这两个方法的第二参数浏览器都不支持,参数为空但不能不要次参数。暂且使用 document.title 操作标题。
  • 存放当前历史记录的对象不能为空,否则操作历史记录前进、返回,history.state 则没有数据。页面可能无变化。

本文源链接:http://www.html5jscss.com/html5-history.html

转载请注明《HTML 5的革新—— history》| html5jscss

评论关闭了.