Html5 History API解析
浏览器前进与回退操作
在传统的浏览器中我们只能通过调用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解析的更多相关文章
- window.history的跳转实质-HTML5 history API 解析
在上一浏览器跳转行为的测试中,我们看到了通过不同的方法操作浏览器跳转时,它的刷新表现有所不同,在这一文章中,将看看,为何会产生这样的不同?其背后的实质是什么?浏览器的访问历史记录到底是如何运作的呢? ...
- html5 history api
1.html5 history api适用场景,个人理解最大的用处是配合ajax使用,使ajax拥有回退.前进的用户体验. 2.代码(dive into html5中的一个小例子) 1)fer.htm ...
- HTML5 history API实践
一.history API知识点总结 在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...
- 转: html5 history api详解~很好的文章
从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...
- HTML5 History API & URL 重定向
HTML5 History API & URL 重定向 disabled server url redirect https://developer.mozilla.org/en-US/doc ...
- HTML5 History API让ajax能回退到上一页
HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...
- HTML5 history API,创造更好的浏览体验
HTML5 history API有什么用呢? 从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残 ...
- 转:HTML5 History API 详解
从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...
- 一篇文章图文并茂地带你轻松实践 HTML5 history api
HTML5 history api 前言 由于笔者在网络上没有找到比较好的关于 history api 的实践案例,有的案例过于杂乱,没有重点,有些案例只是告诉读者 api 是什么,却没告诉怎么用,本 ...
随机推荐
- 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. ...
- [转]Oracle中的索引详解
原文地址:http://www.oschina.net/question/30362_4057 一. ROWID的概念 存储了row在数据文件中的具体位置:64位 编码的数据,A-Z, a-z, 0- ...
- 【CodeForces 567F】Mausoleum
寒假最后一题补完啦 ^∀^ 题意 1到n每个数字有两个,排成先不降后不升的序列,比如112332,并且满足k个形如 3 <= 6 代表第三个数字要≤第六个数字这样的约束要求,求有多少种排法. 分 ...
- Cocos2d-X3.0 刨根问底(二)----- 从HelloWorld开始
小鱼习惯直接从代码实例来学习一套成型的引擎库. 运行cpp-empty-test 一个典型的HelloWorld程序翻看代码结构 看到了 main.h与main.cpp文件就从这里开始 #ifndef ...
- SOM自组织映射网络 教程
概述 SOM是芬兰教授Teuvo Kohonen提出的一种神经网络算法,它提供一种将高维数据在低维空间进行表示的方法(通常是一维或二维).缩减向量维度的过程,叫做向量量化(vector quantis ...
- java反射学习
通过一个对象获得完整的包名和类名 package reflect; public class GetClass { public static void main(String[] args) { G ...
- Redis 集合操作
1.SCARD key 返回集合 key 的基数(集合中元素的数量). 2.SDIFFSTORE destination key [key ...] 这个命令的作用和 类似,但它将结果保存到 des ...
- PHP中soap的使用例子
PHP 使用soap有两种方式. 一.用wsdl文件 服务器端. <?phpclass service{ public function HelloWorld() { return " ...
- MySQL逻辑备份与恢复
备份:mysqldump -uroot -p yyzc department > /home/admin/yyzc_backup.sql 恢复:mysql -uroot -p yyzc < ...
- 在 ASP.NET MVC 3 中应用 KindEditor
http://www.cnblogs.com/weicong/archive/2012/03/31/2427608.html 第一步 将 KindEditor 的源文件添加到项目中,建议放到 /Scr ...