html5之histroy浅析

history是HTML5的新特性,我们可以使用它操作这个历史记录堆栈。

(1)history提供了对浏览器历史纪录堆栈的读取,同时实现在访问记录中的前进和后退;

history.length

历史记录堆栈的长度

back(),forward(),go();

window.history.back();效果等同点击了浏览器工具栏上的返回键;

window.history.forward();效果等同点击了浏览器工具栏上的前进键;

window.history.go();移动到历史记录中特定的位置,window.history.go(-1)等同back,window.history.go(1)等同forward

(2)history提供修改历史纪录堆栈的方法

history.pushState(stateObj, title, urlParams)

用于添加历史纪录,通过stateObj来标记该记录,可以通过history.state来读取验证;如果urlParams有值的话,url会加上相应的hash值,但是该行为并不会触发hashchange和页面的刷新;

举个例子:

假设http://www.baidu.com/foo.html页面执行以下代码,

var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");

此时url地址栏显示http://www.baidu.com/bar.html,但浏览器不会加载bar.html页面,即使这个页面存在也不会加载。

然后访问http://www.qq.com,然后点击后退。这时,url地址栏将会,http://www.baidu.com/bar.html,通过history.state读取状态对象,该状态对象为{foo: "bar" }

最后再次点击后退,URL将变成http://www.baidu.com/foo.html,通过history.state读取状态对象,该状态对象为null。这次的返回动作并没有改变文档的内容。

history.replaceState(stateObj, title, urlParams)

用于修改当前的state,而不是添加一个新的历史记录;

(3)popstate事件

前进、后退,push state,replaceState将触发该事件,事件对象的state属性获取history.state对象的copy;

相关tips:

(1)当页面加载时,它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。

(2)onload之间通过location.href进行跳转,则history中的历史纪录数不增加

参考链接:

http://www.tuicool.com/articles/Jnuyqq

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

时间: 2024-10-09 21:27:09

html5之histroy浅析的相关文章

【S】【S】【S】一大波前端干货整合

前端交流站点 大前端       http://www.daqianduan.com/ V2EX       http://www.v2ex.com/ W3cplus    http://www.w3cplus.com/ W3Cfuns   http://www.w3cfuns.com/ Github      https://github.com/ 前端基础知识 CSS       CSS参考手册 http://www.w3school.com.cn/cssref/ JQuery   jQue

(转) 浅析HTML5在移动应用开发中的使用

(转)浅析HTML5在移动应用开发中的使用 (原)http://www.iteye.com/magazines/67 2012-03-07  来自 UECD.163.com  编辑 wangguo 有38498人浏览 收藏 html5 移动开发 app UI < > 猎头职位: 上海: Junior Product Manager 前言 HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间:移动端的IE.Chrome.FireFox.Safari,亦或是新出现的浏览器,谁能达到在移动端对

浅析PHP程序员必要了解html5绘画标签&lt;canvas&gt;

目前HTML5还在大行其道,伴随产生了很多新的代码办法. 其中一个便是基于HTML5的游戏,例如微信推广中用到的小游戏------神经猫 或可以单独下载运行的萌宠消除类型游戏 这样的小游戏大多数都是通过一个html5的新增<canvas>标签实现的,这个标签有一套自己的编程接口(canvas API),专门用来绘制图形,可以实现一系列漂亮的图形与图像,创建出更好更丰富的新一代web页面,canvas标签通过JavaScript语言的画布,以及脚本来进行图像的绘制. 接下来我们来了解canvas

浅析HTML5的10大优势

你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码.HTML5是web开发世界的一 次重大的改变,事实上不管你是否喜欢,它都是代表着未来趋势.其实HTML5并不难理解和使用.我们这里能列出许多原因为什么现在要开始使用HTML5. 目前有很多的文章介绍使用HTML5并且介绍了使用它的优势和好处,没错,我们这篇文章也类似.随着更多这样的文章,以及Apple的支 持, Adobe围绕HTML5的产品开发,以

浅析HTML5在移动应用开发中的使用

前言 HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间:移动端的IE.Chrome.FireFox.Safari,亦或是新出现的浏览器,谁能达到在移动端对HTML5更好的支持,谁就能在以后的移动应用领域占据更多的市场. 现在我们怎么装APP 有了HTML5以后怎么装APP 更灵活.更方便的app使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一. 下面列举HTML5适合移动应用开发的几大特性: 1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage

HTML5前端开发是做什么的?HTML5前端开发前景浅析

前端是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.Java 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动端网页,处理视觉和交互问题. 前端的三大基础毫无疑问就是HTML.CSS和JS.我称之为前端的骨.肉和魂. 先说"骨"--HTML.HTML,翻译过来就是超文本标记语言,而不是江湖上的HOW TO ML.方向不能搞错了,我们整的东西可是老少咸宜的.HTML学习最重要的标签的学习,div.h1-h6.p.ul

辛星浅析html5中的role属性

我们使用role属性告诉辅助设备.这个元素所扮演的角色.比方点击的按钮,我们通常就使用role="button",会让这个元素可点击. 可是它很多其它的是用来增强语义性,当现有的html标签不能充分表达语义性的时候,就能够借助role来说明.通常它很多其它的出如今一些自己定义的组件上. 比方html中没有tree标签.我们就能够把他的role设置为tree.这样能够增强组件的可訪问性.可用性和可交互性.

大中型网站技术架构浅析 - 实时通信

本文所讲述的『实时通信』主要围绕浏览s器端和服务器端之间的实时通信.大中型网站技术架构浅析 系列之一. 实时通信主要分3大类: 1. Pull技术,轮询(Polling) 客户端定时轮询请求,服务器端立刻返回. 优点:短链接,服务器处理方便,支持跨域. 缺点:有一定延迟 微博未读微博数和未读消息(评论,@)就是用polling实现的. 应用场景:对实时性要求不高的应用,如新微博提示,评论提示,回复提示等. 2. Push,反向Ajax(Reverse Ajax)或者叫Comet. 实现方式主要有

Ajax语法浅析

Ajax是目前很普遍的一门技术,也是很值得探讨和研究的一门技术.本文将针对Ajax的发展过程并结合其在不同库框架中的使用方式来和大家分享下Ajax的那些新老语法. Ajax语法浅析 Ajax简介 Ajax全称为"Asynchronous Javascript And XML",即"异步JavaScript和XML"的意思.通过Ajax我们可以向服务器发送请求,在不阻塞页面的情况下进行数据交互,也可以理解为异步数据传输.在Ajax的帮助下我们的网页只需局部刷新即可更新