H5中对history栈的操作
今天研究一下H5中history操作的相关知识,首先梳理一下基本内容:
一、在history中的跳转
使用 back()
, forward()
和 go()
方法来完成在用户历史记录中向后和向前的跳转。
window.history.back(); window.history.forward(); window.history.go(-1); window.history.go(1);
可以通过查看长度属性的值来确定的历史堆栈中页面的数量:
let numberOfEntries = window.history.length;
二、添加和修改历史记录中的条目,即对history栈的操作
HTML5引入了 history.pushState() 和 history.replaceState() 方法,它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate
配合使用。
使用 history.pushState()
可以改变referrer,它在用户发送 XMLHttpRequest
请求时在HTTP头部使用,改变state后创建的 XMLHttpRequest
对象的referrer都会被改变。因为referrer是标识创建 XMLHttpRequest
对象时 this
所代表的window对象中document的URL。
pushState() 方法:
需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL
注意 pushState()
绝对不会触发 hashchange
事件,即使新的URL与旧的URL仅哈希不同也是如此。
let stateObj = { foo: "bar", }; history.pushState(stateObj, "page 2", "bar.html");
replaceState() 方法:
history.replaceState()
的使用与 history.pushState()
非常相似,区别在于 replaceState()
是修改了当前的历史记录项而不是新建一个。 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。
replaceState()
的使用场景在于为了响应用户操作,你想要更新状态对象state或者当前历史记录的URL。
let stateObj = { foo: "bar", }; history.pushState(stateObj, "page 2", "bar.html");
popstate 事件:
每当活动的历史记录项发生变化时, popstate
事件都会被传递给window对象。并且popstate 被触发时能得到的状态对象。
当然,也可以直接读取当前历史记录项的状态对象state,而不必等待popstate
事件, 只需要这样使用history.state
属性:
原文地址:https://www.cnblogs.com/gopark/p/12055581.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 9.29【前端开发】超链接伪类:如何在svg元素上使用超链接伪类?
- Angular input控件的click事件表达式如何被转换成JavaScript函数
- Angular input控件的click事件响应处理的调用上下文
- SAP Spartacus cms.service.ts getComponentData
- toString如何转json
- DàYé玩转数据战略Step By Step
- 突发!Windows XP 源代码泄露
- SAP Spartacus打印Occ endpoint请求的url
- 线上发生死锁异常了,该怎么办
- jQuery 元素操作
- jQuery 文本属性值
- jQuery 属性操作
- 方老师聊Nginx知识点
- 《Java从入门到失业》第五章:继承与多态(5.1-5.7):继承
- 【赵渝强老师】Flink的DataSet算子