HTML5 historyState pushState、replaceState
DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退。
从HTML5开始,我们可以开始操作这个历史记录堆栈。
1.History
使用back(),forward(),和go()方法可以在用户的历史记录中前进和后退
前进和后退
后退:
window.history.back();
这个方法会像用户点击了浏览器工具栏上的返回键一样。
同样的,也可以用以下方法产生用户前进行为:
window.history.forward();
移动到历史记录中特定的位置
你可以使用go()方法从session历史中载入特定的页面。
向后移动一页:
window.history.go(-1);
向前移动一页:
window.history.go(1);
类似的,你可以前进或者后退多页。
还可以通过检查浏览器历史记录的length属性来找到历史记录堆栈中的页面总数。
var numberOfEntries = window.history.length;
注意:IE支持向go()方法传URL参数。
2.添加和修改history实体
自Gecko2开始引入 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5引入了histtory.pushState()和history.replaceState()这两个方法,他们允许添加和修改history实体。同时,这些方法会和window.onpostate事件一起工作。
使用history.pushState()方法来修改referrer,这种方法可以被用在经过修改状态后而为xmlhttpRequest对象创建的http header中。这个referrer会是创建XMLHttpRequest 时document的URL。
pushState 用于向 history 添加当前页面的记录,而 replaceState 和 pushState 的用法完全一样,唯一的区别就是它用于修改当前页面在 history 中的记录。
例子
假设http://mozilla.org/foo.html页面执行了一下JS
var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");
这种方法将会使url地址栏显示http://mozilla.org/bar.html,但浏览器不会加载bar.html页面,即使这个页面存在也不会加载。
现在再次假设用户继续访问http://google.com,然后点击后退。这时,url地址栏将会,http://mozilla.org/bar.html,页面会得到popstate事件(chrome),这个状态对象会包含一个stateObj的copy。这个页面看起来像foo.html。+
这时,我们再次点击后退,URL将变成http://mozilla.org/foo.html,document将得到另一个popstate事件和为null的state对象。这次的返回动作并没有改变文档的内容。(也许会过一会尝试加载…chrome)
pushState方法
pushState()有三个参数:state对象,标题(现在是被忽略,未作处理),URL(可选)。具体细节:
· state对象 –state对象是一个JavaScript对象,它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史 记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象,这个对象的最大存储空间为640k。如果大于这个数 值,则pushState()方法会抛出一个异常。如果确实需要更多的空间来存储,请使用本地存储。
· title—firefox现在回忽略这个参数,虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串,以防止将来的修改。或者可以传一个简短的标题来表示state
· URL—这个参数用来传递新的history实体的URL,注意浏览器将不会在调用pushState()方法后加载这个URL。但也许会过一会尝试加载这个URL。比如在用户重启了浏览器后,新的url可以不是绝对路径。如果是相对路径,那么它会相对于现有的url。新的url必须和现有的url同域,否则pushState()将抛出异常。这个参数是选填的,如果为空,则会被置为document当前的url。
某种意义上来说,调用pushState()方法很像设置了window.location = “#foo”,这两者都会创建和激活另一个关联到当前document的history实体,但pushState()另外有一些优点:
l 新的url可以是任何和当前url同域的url,相比之下,如果只设置hash,window.location会保持在同一个document。
l 如果不需要,你可以不修改url。对比而言,设置window.location = “#foo”;仅产生新的history实体,如果你当前的hash不是#foo
l 你可以将任意的数据与你的新history实体关联。使用基于hash的方法,需要将所有相关的数据编码为一个短字符串。
注意,pushState()方法不会使hashchange时间发生,即使是新旧url只是hash不同。
replaceState()方法
history.replaceState() 用起来很像pushState(),除了replaceState()是用来修改当前的history实体而不是创建一个新的。这个方法有时会很有用,当 你需要对某些用户行为作反应而更新一个state对象或者当前history实体时,可以使用它来更新state对象或者当前history实体的url。
popstate事件
当history实体被改变时,popstate事件将会发生。如果history实体是有pushState和replaceState方法产生的,popstate事件的state属性会包含一份来自history实体的state对象的拷贝
详见window.onpopstate
读取当前的state
当页面加载时,它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。当页面重新加载,页面将收到onload事件,但不会有popstate事件。然而,如果你读取history.state属性,将在popstate事件发生后得到这个state对象
var currentState = history.state;
Browsers: Tested and Working In
HTML5 Browsers
Chrome 8,9,10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
HTML4 Browsers
IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS prior to version 4.3
转自:http://zhanchaojiang.iteye.com/blog/1462994
https://developer.mozilla.org/en-US/docs/Web/API/History_API
http://www.cnblogs.com/flash3d/archive/2013/10/23/3384823.html
HTML5 historyState pushState、replaceState的更多相关文章
- pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新
使用Ajax可以异步获取数据,可以更高效地渲染页面. 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好 1. 早前会使用浏览器的 hash ...
- HTML5 history新特性pushState、replaceState
DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退. 从HTML5开始,我们可以开始操作这个历史记录堆栈. 1.Histo ...
- HTML5 history新特性pushState、replaceState,popstate
http://blog.csdn.net/tianyitianyi1/article/details/7426606 https://developer.mozilla.org/zh-CN/docs/ ...
- HTML5之pushstate、popstate操作history,无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
- PJAX初体验(主要是利用HTML5 新增API pushState和replaceState+AJAX)
说在前面 什么是PJAX呢? 站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化. 也不是什么新鲜技术,主要是AJAX+html5 pushState和re ...
- ajax与HTML5 history pushState/replaceState实例
一.本文就是个实例展示 三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗 跟搜索引擎搞基 自己备忘 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...
- HTML5新api即pushState和replaceState实现无刷新修改url
1,首先我面临一个需求,页面回退时需要知道来之前的页面状态.很简单,回退时在url里赋参数即可.问题是在ipad上,回退按钮是安卓那边的,我控制不了.只好采用js无刷新修改url历史记录,来告诉服务器 ...
- Ajax异步刷新地址栏url改变(利用Html5 history.pushState实现)
早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...
- 从Vue-router到html5的pushState
最近在用vue的时候突然想到一个问题 首先,我们知道vue实现的单页应用中一般不会去刷新页面,因为刷新之后页面中的vuex数据就不见了. 其次,我们也知道一般情况下,url变更的时候,比如指定loca ...
随机推荐
- 垃圾收集器之:throughput吞吐量收集器
在实践中我们发现对于大多数的应用领域,评估一个垃圾收集(GC)算法如何根据如下两个标准: 吞吐量越高算法越好 暂停时间越短算法越好 首先让我们来明确垃圾收集(GC)中的两个术语:吞吐量(through ...
- IE浏览器中overflow:hidden无效,内层元素超出外层div的解决方法
原文地址:http://www.xin126.cn/show.asp?id=2624 在用css布局的时候,用IE浏览器(ie6.ie7.ie8)预览,有时候会出现内层元素(内部DIV.图片等)超出外 ...
- 探究CSS中border-top属性的使用
上一节我们介绍了CSS top属性的用法,那么这节关于CSS border-top属性用法学习起来就会轻松一些,border-top 简写属性把上边框的所有属性设置到一个声明中. 本文向大家描述一下C ...
- PHP书写格式
从一个例子开始. 启动编辑器,创建一个php文件并键入如下代码: <?php echo "你好!"; ?> 运行 将该文件命名为 test.php 并存储于 E:htm ...
- ossim 4.1 安装
在这说明一下,本人也是第一次安装这东东很多我自己也不懂,只能把自己的安装步骤通过贴图呈现出来了!!!! 我用root用户登录的,顺便查看ip 在浏览器打开网址https://192.168.86.15 ...
- Linux命令行下如何终止当前程序
Linux命令行下如何终止当前程序 快捷键: Ctrl+c 在命令行下起着终止当前执行程序的作用, Ctrl+d 相当于exit命令,退出当前shell Ctrl+s 挂起当前shell(保护作用很明 ...
- 网际协议版本4(IPv4)
IP是一种不可靠的无连接数据报协议-一种尽最大努力交付的服务,尽最大努力一词的意思是IP分组可能会损坏,丢失,失序或延迟到达,并且可能给网络带来拥塞. 网络层的分组称为数据报.是一个可变长度的分组.由 ...
- 用Redis实现分布式锁 与 实现任务队列【转载】
这一次总结和分享用Redis实现分布式锁 与 实现任务队列 这两大强大的功能.先扯点个人观点,之前我看了一篇博文说博客园的文章大部分都是分享代码,博文里强调说分享思路比分享代码更重要(貌似大概是这个意 ...
- hibernate 三种状态
JPA是Java Persistence API的简称,中文名Java持久层API. 因JPA是由Hibernate的创建者编写,因此和Hibernate基本相似一致.JPA由不同的服务解析,因此在w ...
- Java 8 日期时间API
Java 8一个新增的重要特性就是引入了新的时间和日期API,它们被包含在java.time包中.借助新的时间和日期API可以以更简洁的方法处理时间和日期; 在介绍本篇文章内容之前,我们先来讨论Jav ...