当前位置:网站首页>浏览器中的history详解
浏览器中的history详解
2022-08-10 00:49:00 【dralexsanderl】
浏览器中的history详解
通过window.history
可以访问浏览器的会话历史记录,同时它暴露了很多有用的方法和属性,允许你在浏览历史中向前和向后跳转。
属性
1. length
会话历史中元素的数目。例如,在一个新的选项卡加载的一个页面中,这个属性返回 1。
2. scrollRestoration
允许 web
应用程序在历史导航上显式地设置默认滚动恢复行为。
值
auto
: 将恢复用户已滚动到的页面上的位置。manual
: 未还原页上的位置。用户必须手动滚动到该位置。
可以手动给scrollRestoration
赋值来改变滚动行为。
3. state
history
堆栈顶部的状态的值。
如果是直接在新标签页输入URL
,此时获取到的state
为null。只有在通过pushState
或者replaceState
后才会有值。
同时可以在state
中提前获取pushState
后的状态。
console.log(`History.state before pushState: ${
JSON.stringify(history.state)}`);
// Now push something on the stack
history.pushState({
name: 'Example'}, "pushState example", 'page3.html');
// Now state has a value.
console.log(`History.state after pushState: ${
JSON.stringify(history.state)}`);
方法
1. back
在浏览器历史记录里前往上一页,用户可点击浏览器左上角的返回按钮模拟此方法。等价于 history.go(-1)
。
当浏览器会话历史记录处于第一页时调用此方法没有效果,而且也不会报错。
2. forward
在浏览器历史记录里前往下一页,用户可点击浏览器左上角的前进按钮模拟此方法。等价于 history.go(1)
.
当浏览器历史栈处于最顶端时 ( 当前页面处于最后一页时 ) 调用此方法没有效果也不报错.
3. go
通过当前页面的相对位置从浏览器历史记录加载页面。比如:参数为-1
的时候为上一页,参数为 1
的时候为下一页。当整数参数超出界限时,例如:如果当前页为第一页,前面已经没有页面了,传参的值为-1
,那么这个方法没有任何效果也不会报错。调用没有参数的 go()
方法或者参数值为 0
时,重新载入当前页面。
4. pushState
按指定的名称和 URL
(如果提供该参数)将数据 push
进会话历史栈中,添加一个状态。
语法:
history.pushState(state, title[, url])
参数
state
: 一个与指定网址相关的状态对象(json
格式,限制在2MB)title
: 当前大多数浏览器都忽略此参数,尽管将来可能会使用到,通常传入空字符''
。url
: (可选)新历史记录条目的URL
由此参数指定,但是,浏览器在调用pushState
后不会加载此URL
。如果未指定此参数,则将其设置为文档的当前URL
。
5. replaceState
更新当前的 state
对象或者当前历史实体的 URL
,使用该方法改变的URL
并不能通过history.back
等方法返回替换前的URL
.
语法:
history.replaceState(state, title[, url])
参数同pushState
一样
边栏推荐
- 【报错】ModuleNotFoundError: No module named ‘scp‘
- Stanford CS143 Speed Pass PA1 Tutorial
- Solidity最强对手:MOVE语言及新公链崛起
- Solving for the number of mines
- 什么是一网统管?终于有人讲明白了
- R语言使用coxph函数构建生存分析回归模型,使用forestmodel包的forest_model函数可视化生存回归模型对应的森林图
- Moonbeam网络维护模式(Maintenance Mode)解读
- 嵌入式Qt-实现两个窗口的切换
- Chip Information|Semiconductor revenue growth expected to slow to 7%, Bluetooth chip demand still growing steadily
- 2022金九银十工作潮,怎么样才能成功跳槽面试拿到高薪呢?
猜你喜欢
随机推荐
地雷数量求解
MySQL最大连接数限制如何修改
嵌入式Qt-实现两个窗口的切换
Not, even the volume of the king to write code in the company are copying and pasting it reasonable?
Are the numbers entered symmetrical?
How to turn off system protection in Win11?How to turn off the system protection restore function?
这一次,话筒给你:向自由软件之父 Richard M. Stallman 提问啦!
Docker 面试题2则--取数据库连接数和docker-compose
XSS详解及复现gallerycms字符长度限制短域名绕过
即时通讯开发如何撸一个WebSocket服务器
【kali-密码攻击】(5.1.2)密码在线破解:Medusa
UI遍历的初步尝试
什么是一网统管?终于有人讲明白了
hint: Updates were rejected because the tip of your current branch is behind hint: its remote counte
Summary of Web Performance Testing Models
PEG derivative Biotin-PEG1-OH (cas: 95611-10-2, 2-biotinaminoethanol) advantage description
【LeetCode】求根节点到叶节点数字之和
ITK编译remote库
y92.第六章 微服务、服务网格及Envoy实战 -- Envoy基础(三)
-Knight Parade-