HTML5 History API

以Html5 History API为关键词搜索,会得到很多结果,我仅根据自己的使用整理。

1、两个API

pushState和replaceState。

pushState向浏览器历史记录里增加一个状态,供浏览器后退前进时使用,用法

history.pushState(data, ‘页面标题‘, url);

replaceState就是替换某个状态,参数和pushState一样。

2、一个事件

onpopstate。

用户点击了前进或者后退就会触发,而不是使用pushState或者replaceState时触发。作用就是检测state是否改变,改变的话我们就可以自定义逻辑了。

window.onpopstate = function(e) {
    //你的代码
}

事件参数e里含有state属性,里面就是你push或者replace的状态。

注:这两个API知识改变了页面的url,具体的逻辑还要自己实现,一般根据state来进入ajax,有时会不靠谱,那就根据url。

尤其用户刷新页面时,会提示页面不存在,所以需要刚进入页面时根据url或者hash来进行判断,显示相应的内容。

http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/ 这里有一个例子很好。

时间: 2024-08-09 14:42:21

HTML5 History API的相关文章

转:HTML5 History API 详解

从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页,所以你又要重新翻一次. 再或者,你想把这个评论发给别人分享,一面给了别人页面地址(为什么不直接复制呢?因为要连带视频等场景啊),一面又要加一句嘱咐:请翻到下面评论的第XX页的XX楼. 这就是问题.试想一下,如果浏览器能记住你当前的状态(比如看到了第十几页),而不是一刷新就还原,是不是就显得智能多了

Html5 History API解析

浏览器前进与回退操作 在传统的浏览器中我们只能通过调用window.history对象的 forward() . back() 或 go(number|url) 方法来进行页面的前进.回退或跳转到某一页面. 而Ajax技术出现出现后我们常常用来实现页面无刷新的局部渲染效果,但却无法对无刷新的页面进行前进和后退的操作. 显然,HTML 5标准制定者也考虑到这一点,于是在HTML 5中为history对象新增了 pushState() . replaceState() 接口以及state属性 sta

HTML5 history API与ajax分页实例页面

<ul id="choMenu" class="rel cho_menu"> <li><a href="ajax.php?area=pudong" class="cho_link cho_link_on">浦东区<span class="ml20">8</span></a></li> <li><a href

使用HTML5的History API

HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的URL来反应出页面内容的变化,这时该功能可以派上用场. 举个例子,当用户从首页进入帮助页面时,我们通过Ajax来加载帮助页面的内容.然后这个用户又转到产品页面,我们需要再一次通过Ajax请求来替换页面的内容.当用户想分享页面的URL时,通过History API,我们可以改变页面的URL来反应内容的

有关html5的history api

从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页,所以你又要重新翻一次. 再或者,你想把这个评论发给别人分享,一面给了别人页面地址(为什么不直接复制呢?因为要连带视频等场景啊),一面又要加一句嘱咐:请翻到下面评论的第XX页的XX楼. 这就是问题.试想一下,如果浏览器能记住你当前的状态(比如看到了第十几页),而不是一刷新就还原,是不是就显得智能多了

ajax与HTML5 history pushState/replaceState实例

一.本文就是个实例展示 三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗 跟搜索引擎搞基 自己备忘 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和领证什么的.HTML5 history相关知识点啪啦啪啦讲起来也是一条又臭又长的裹脚布,精气神实在不够用,这里,直接一个实例. 二.ajax载入与浏览器历史的前进与后退 众所周知,Ajax可以实现页面的无刷新操作——优点:但是,也会造成另外的问题,无法前进与后退!曾几何时,Gmail似乎借助ifra

History API与浏览器历史堆栈管理

阅读目录 History API回顾 History API与业务实践 回顾 移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有--针对不支持onhashchange属性的IE6-7需要设置定时器不断检查hash值改变,性能上并不是很友好. 而如今,在移动端开发中HTML5规范给我们提供了一个History接口,使用该接口可以自由操纵历史记录.本文并不详细介绍Hi

HTML 5 History API的”前生今世”

原文:An Introduction To The HTML5 History API 译文:关于HTML 5 History API 的介绍 译者:dwqs History是有趣的,不是吗?在之前的HTML版本中,我们对浏览历史记录的操作非常有限.我们可以来回使用可以使用的方法,但这就是一切我们能做的了. 但是,利用HTML 5的History API,我们可以更好的控制浏览器的历史记录了.例如:我们可以添加一条记录到历史记录的列表中,或者在没有刷新时,可以更新地址栏的URL. 为什么介绍Hi

HTML 5 History API

原文:An Introduction To The HTML5 History API 译文:关于HTML 5 History API 的介绍 译者:dwqs History是有趣的,不是吗?在之前的HTML版本中,我们对浏览历史记录的操作非常有限.我们可以来回使用可以使用的方法,但这就是一切我们能做的了. 但是,利用HTML 5的History API,我们可以更好的控制浏览器的历史记录了.例如:我们可以添加一条记录到历史记录的列表中,或者在没有刷新时,可以更新地址栏的URL. 为什么介绍Hi