浏览器前进与回退操作

在传统的浏览器中我们只能通过调用window.history对象的 forward() 、 back() 或 go(number|url) 方法来进行页面的前进、回退或跳转到某一页面。

而Ajax技术出现出现后我们常常用来实现页面无刷新的局部渲染效果,但却无法对无刷新的页面进行前进后退的操作。

显然,HTML 5标准制定者也考虑到这一点,于是在HTML 5中为history对象新增了 pushState() 、 replaceState() 接口以及state属性

state属性

state属性的值为对象(默认值为null),该值由用户通过pushState()方法传入,用于记录与改条历史记录相关的页面数据信息

pushState(state, title, url)

pushState()方法包含三个参数:

  • state: 用户为该条历史记录写入的数据对象来存储页面相关数据信息
  • title:页面标题
  • url:页面url

在HTML 5中,我们使用history.pushState()会往history中写入一条历史记录,history.length的值也会+1,history.state被传入的state对象覆盖。

replaceState(state, title, url)

replaceState()方法的三个参数和pushState()相同,但replaceState()用于修改当前页的历史记录。

如何使用state对象?

HTML5除了带给我们以上三个新增的接口以外,还允许浏览器在window上监听popState事件,每当对页面进行前进或后退的操作时,浏览器会从历史记录中取出state对象并通过参数传入popState事件的回调函数中:

window.addEventListener("popstate", function() {
var currentState = history.state;
/*
* 使用state做点事情
*/
});

这部分的API比较少,也没什么好讲的,权当做个记录,END

Html5 History API解析的更多相关文章

  1. window.history的跳转实质-HTML5 history API 解析

    在上一浏览器跳转行为的测试中,我们看到了通过不同的方法操作浏览器跳转时,它的刷新表现有所不同,在这一文章中,将看看,为何会产生这样的不同?其背后的实质是什么?浏览器的访问历史记录到底是如何运作的呢? ...

  2. html5 history api

    1.html5 history api适用场景,个人理解最大的用处是配合ajax使用,使ajax拥有回退.前进的用户体验. 2.代码(dive into html5中的一个小例子) 1)fer.htm ...

  3. HTML5 history API实践

    一.history API知识点总结 在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...

  4. 转: html5 history api详解~很好的文章

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  5. HTML5 History API & URL 重定向

    HTML5 History API & URL 重定向 disabled server url redirect https://developer.mozilla.org/en-US/doc ...

  6. HTML5 History API让ajax能回退到上一页

    HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...

  7. HTML5 history API,创造更好的浏览体验

    HTML5 history API有什么用呢? 从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残 ...

  8. 转:HTML5 History API 详解

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  9. 一篇文章图文并茂地带你轻松实践 HTML5 history api

    HTML5 history api 前言 由于笔者在网络上没有找到比较好的关于 history api 的实践案例,有的案例过于杂乱,没有重点,有些案例只是告诉读者 api 是什么,却没告诉怎么用,本 ...

随机推荐

  1. ssh scp ssh-copy-id 非22端口的操作方法

    (1)首先我们来看一下ssh-copy-id的非22端口的操作方法 ssh-copy-id -i  ~/.ssh/id_rsa.pub "-p 10056 wwwad@192.168.20. ...

  2. [转]Oracle中的索引详解

    原文地址:http://www.oschina.net/question/30362_4057 一. ROWID的概念 存储了row在数据文件中的具体位置:64位 编码的数据,A-Z, a-z, 0- ...

  3. 【CodeForces 567F】Mausoleum

    寒假最后一题补完啦 ^∀^ 题意 1到n每个数字有两个,排成先不降后不升的序列,比如112332,并且满足k个形如 3 <= 6 代表第三个数字要≤第六个数字这样的约束要求,求有多少种排法. 分 ...

  4. Cocos2d-X3.0 刨根问底(二)----- 从HelloWorld开始

    小鱼习惯直接从代码实例来学习一套成型的引擎库. 运行cpp-empty-test 一个典型的HelloWorld程序翻看代码结构 看到了 main.h与main.cpp文件就从这里开始 #ifndef ...

  5. SOM自组织映射网络 教程

    概述 SOM是芬兰教授Teuvo Kohonen提出的一种神经网络算法,它提供一种将高维数据在低维空间进行表示的方法(通常是一维或二维).缩减向量维度的过程,叫做向量量化(vector quantis ...

  6. java反射学习

    通过一个对象获得完整的包名和类名 package reflect; public class GetClass { public static void main(String[] args) { G ...

  7. Redis 集合操作

    1.SCARD key 返回集合 key 的基数(集合中元素的数量). 2.SDIFFSTORE destination key [key ...] 这个命令的作用和  类似,但它将结果保存到 des ...

  8. PHP中soap的使用例子

    PHP 使用soap有两种方式. 一.用wsdl文件 服务器端. <?phpclass service{ public function HelloWorld() { return " ...

  9. MySQL逻辑备份与恢复

    备份:mysqldump -uroot -p yyzc department > /home/admin/yyzc_backup.sql 恢复:mysql -uroot -p yyzc < ...

  10. 在 ASP.NET MVC 3 中应用 KindEditor

    http://www.cnblogs.com/weicong/archive/2012/03/31/2427608.html 第一步 将 KindEditor 的源文件添加到项目中,建议放到 /Scr ...