0
点赞
收藏
分享

微信扫一扫

Html5 history对象详解

IT影子 2022-04-15 阅读 42

这个文章记录的是 html5 原生的 history 对象,不是 vue-router 的 history。

作用

history 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。window.history: 返回当前会话的 history 状态。

属性

  • history.length
只读,返回一个整数,该证书表示会话历史中元素的数目,包括当前加载的页。
  • history.scrollRestoration
允许 web 应用程序在历史导航上显示的设置默认滚动恢复行为。此属性可以是自动的(auto)或者手动的(manual)。

# 这个属性在 vue-router 中设置了 scrollBehavior 属性的时候,会将 history.scrollRestoration 设置为 “manual”。
  • history.state
只读,表示历史堆栈顶部的状态的值。当通过浏览器存在前进后退的操作时,会触发 popState 事件,且会将该 state 携带回来。

方法

  • history.back()
在浏览器里是里前往上一页,用户可以点击浏览器左上角的返回。等价于 history.go(-1);当浏览器会话历史记录处于第一页时调用此方法没有效果,而且也不会报错。
  • history.forward()
在浏览器记录记录里前往下一页,用户可点击浏览器左上角的前进。等价于 history.go(1);
  • history.go( param )
通过当前页面的相对位置从浏览器历史记录(会话记录)加载页面。
(1) 如果 param 为 0 或者不传,则重新载入当前页面。
(2) 如果 param 为正数,则查找当前页前面的历史记录,并且前进到对应页面。(之所以有正数的情形,其实是因为页面回退过。)
(3) 如果 param 为负数,则查找当前页后面的历史记录,并且后退到对应页面。
  • history.pushState(state, title, url);
history.pushState()方法向浏览器历史栈添加了一个状态(增加一个记录)。pushState()方法带有三个参数:一个状态对象、一个标题(现在被忽略了)以及一个可选的 URL 地址
(1) state object —— 状态对象是一个由 pushState()方法创建的、与历史纪录相关的 javascript 对象。当用户定向到一个新的状态时,会触发 popstate 事件。事件的 state 属性包含了历史纪录的 state 对象。如果不需要这个对象,此处可以填 null。
(2) title —— 新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填 null。

核心重点

1、state

它关系到由pushState()方法创建出来的新的history实体, popstate 的时候会携带返回该 state。

(1) state对象 –state对象是一个JavaScript对象,它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史 记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象,这个对象的最大存储空间为640k。如果大于这个数 值,则pushState()方法会抛出一个异常。如果确实需要更多的空间来存储,请使用本地存储。

(2) state对象 表示历史堆栈顶部的状态的值。当通过浏览器存在前进后退的操作时,会触发 popState 事件,且会将该 state 携带回来。

2、history.pushState

浏览器不会在调用pushState()方法后就加载url对应的网页.

(1) 浏览器不会在调用pushState()方法后就加载url对应的网页, 但是地址栏地址会变为新的 url。会在进行前进后退,或者刷新浏览器的时候才会加载新的 url 对应的网页。
(2) pushState、replaceState 只能处理的新 url,必须跟现有 url 同域,否则会抛异常。
(3) pushState 会新增一个 histroy 实体。

3、histroy.replaceState

基本与 pushState 的行为一样,主要区别是 replaceState 会修改当前 history 实体的属性,比如 state。 
举报

相关推荐

0 条评论