history新增方法
history对象包含用户访问过的URL,属于window对象的一部分,传统的使用中,它拥有length属性(浏览器历史列表URL数目)
及back()、forward()、go()方法。
而新的H5则赋予了其更多的新特性:
往返缓存
默认情况下,浏览器会缓存当前会话页面,这样当下一个页面点击后退按钮,或前一个页面点击前进按钮,浏览器便会从缓存中提取并加载此页面,这个特性被称为“往返缓存”。
备注: 此缓存会保留页面数据、DOM和js状态,实际上是将整个页面完好无缺地保留
------------沉默分割线-----------------------------------------------------------------------------------------------------------------------
pushState(state, title, url)
往历史记录栈中添加记录
支持度: IE10+
state: 一个js对象,主要用于在popstate事件中作为参数被获取
title: 新页面的标题,部分浏览器(比如firefox)忽略此参数,因此一般为null
url: 新历史记录的地址,可为页面地址也可为一个锚点值,新url必须与当前url处于同一个域,否则将抛出异常,此参数若没有特别标注,会被设为当前文档url
实例:
假定当前网址是example.com/1.html,使用pushState方法在浏览记录(history对象)中添加一个新记录
var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');
浏览器地址栏将立即变成example.com/2.html,但并不会跳转到2.html,甚至不会检查2.html是否存在,也不会再popstate事件中获取,因为:这个方法仅仅是添加了一条最新记录,不会触发页面刷新
备注:
1.将url设为锚点值时不会触发hashchange
2.如果设置不同域名地址,会报错,这样做的目的是:防止用户以为它们是同一个网站,若没有此限制,将很容易进行XSS、CSRF等攻击方式
------------华丽分割线--------------------------------------------------------------------------------------------------------------------------
replaceState(state, title, url)
支持度: IE10+
参数与pushState一致,但其功能是改变当前的历史记录而不是添加新的记录。
同样不会触发popstate
------------璀璨分割线--------------------------------------------------------------------------------------------------------------------------
history.state
支持度: IE10+
返回当前历史记录的state
--------------曼妙分割线---------------------------------------------------------------------------------------------------------------------
popstate事件
支持度: IE10+
语法: window.onpopstate= function(event){
console.log(event.state) //当前历史记录的state对象
}//注意大小写
触发条件: 点击前进后退按钮、调用back()、forward()、go()
个人思考: 对于pushState、replaceState无法触发它,可以从语义上理解,pop有弹出、提取出的意味,是从历史记录栈中提取出来,而pushState、replaceState分别是压入栈和改变元素,自然不会触发。
history新增方法的更多相关文章
- 谈谈HTML5中的history.pushSate方法,弥补ajax导致浏览器前进后退无效的问题
移动端为了减少页面请求,有时候需要通过单页面做成多页面的效果,最近有这么个需求,表单填完后执行第一步,然后执行第二步,第二步执行完后再执行第三步,每一步都要保留之前的数据.这种情况用单页面实现再合适不 ...
- HTML5的新增方法
json的新增方法: parse() 将JSON转换为字符串:必须是严格的JSON格式: 用法 : var s = {"name":"name"}; JSO ...
- Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录
根据网上参考自己做个笔记:参考网址:http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5为histor ...
- JS window对象 History 对象 history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。语法: window.history.[属性|方法]
History 对象 history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能. 注意:从窗口被打开的那一刻开始记录,每个浏览器窗口.每个标签页乃至每个框架,都 ...
- ES6 - 基础学习(4): 模板字符串和字符串新增方法
模板字符串 模板字符串:我理解为将字符串格式化.模板化,将字符串加强处理,此处的模板有动词的意思. 字符串模板基本格式: `xxxxxx`(前后都用反引号[tab键上面按键]引起来).除了作为普通字符 ...
- tp5 中 model 的新增方法
//默认主键为自动识别,如果需要指定,可以设置属性: namespace app\index\model; use think\Model; class User extends Model { pr ...
- ES6对象的扩展及新增方法
1.属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz//{foo:'bar ...
- Java 8之Map新增方法<转>
在Java 8中的Map.Entry接口中增加了comparingByKey, comparingByValue方法,它们都返回Comparator<Map.Entry<K,V>&g ...
- 【ES6 】ES6 字符串扩展及新增方法
模板字符串 传统写法 var str = 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' ...
随机推荐
- C# 根据部分属性来判断俩个对象是否相同
根据部分属性来判断俩个对象是否相同 代码是第一版本 可能不牢固 有问题请反馈一下 3QU 效果图: public static class CustomExpand { public static b ...
- MariaDB第三章(select)
基本查询 --查询基本使用(条件,排序,聚合函数,分组,分页) --创建学生表 create table students ( id int unsigned not null auto_increm ...
- http 概念
什么是回调? 什么是同步/异步? 什么是I/O? 什么是单线/多线程? 什么是阻塞/非阻塞? 什么是事件? 什么是事件驱动? 什么是基于事件驱动的回调? 什么是事件循环?
- BugPhobia发布篇章:Beta版本学霸在线系统正式发布
0x00:测试报告版本管理 版本号 具体细节 修订时间 V 1.0 整理第一轮迭代用户管理和登陆注册的功能性验证测试,预计将继续网页对浏览器版本的兼容性测试 2015/11/12 V1.0.1 整理第 ...
- 20135337——linux第四次实践:字符集总结与分析
ASCII & GB2312 & UTF-8 ASCII 主要用于显示现代英语和其他西欧语言.它是现今最通用的单字节编码系统,并等同于国际标准ISO 646: 7位(bits)表示一个 ...
- 美团外卖app可行性分析
美团外卖app可行性分析 1 引言 1.1编写目的 年轻人追求时尚,快捷,因此外卖行业拥有广阔的消费群体:团购的兴起,也促进了人们的消费欲望,人们继续一个外卖平台,来满足他们的欲望.O2o模式的日渐完 ...
- 第三个spring冲刺第4天
今天,我们在难度选择方面做了谈论,根据难度选择题目的难易和数量,在计时器方面应该有相应的配合,由此决定难易度,因此,我们要做好谈论,为这个难易度做好准备去编译,以免出现混乱.
- 过滤器Filter的使用(以登录为例子)
使用过滤器步骤: (1)在web.xml文件中添加过滤器(以下例子是过滤多个请求) <!-- 用户登录过滤 --> <filter> <filter-name>lo ...
- RocketMQ事务消息实战
我们以一个订单流转流程来举例,例如订单子系统创建订单,需要将订单数据下发到其他子系统(与第三方系统对接)这个场景,我们通常会将两个系统进行解耦,不直接使用服务调用的方式进行交互.其业务实现步骤通常为: ...
- 服务器RAID设置以及简单理解
备注: 适用于测试环境,生产环境暂时未验证 1. RAID种类 最高性能的RAID0 完全拆分所有的IO 不进行校验 但是单盘损坏, 数据完全丢失 最高损耗的RAID1 损失一半的存储容量, 做镜像, ...