html5之histroy浅析
2024-10-15 00:35:22
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中的历史纪录数不增加
参考链接:
最新文章
- kmdjs api reference
- 探秘重编译(Recompilations)(2/2)
- Java 密码扩展无限制权限策略文件
- mongodb 安装与启动简单使用
- byte,bitmap,image互转
- d3 之值域映射
- iostream/fstream中的输入输出流指针的绑定,tie函数的使用。
- websphere节点、单元、服务之间的关系
- 定时关机命令-shutdown
- UESTC_Big Brother 2015 UESTC Training for Graph Theory<;Problem G>;
- Objective-c 程序结构
- linq中的临时变量
- 安装Tomcat指定JDK(转)
- Chrome 扩展 最近的历史 HistoryBar v1.1
- 简洁灵活的前端框架------BootStrap
- Python中Json对象处理的jsonpath-rw
- memcache缓存雪崩、缓存无底洞、缓存穿透、永久数据被踢现象
- file 文件的操作
- 基于Java的REST架构风格及接口安全性设计的讨论
- 潭州课堂25班:Ph201805201 爬虫基础 第十一课 点触验证码 (课堂笔记)