JavaScript中的history对象


简介:

history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

注意:从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。

属性

1.history.length(只读)

返回一个整数,该整数表示会话历史中元素的数目,包括当前加载的页。例如,在一个新的选项卡加载的一个页面中,这个属性返回 1。

2.history.scrollRestoration

允许 Web 应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的(auto)或者手动的(manual)。

history.scrollRestoration = 'manual'; //关闭浏览器自动滚动行为
history.scrollRestoration = 'auto'; //打开浏览器自动滚动行为(默认)

3.history.state(只读)

返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate (en-US) 事件而查看状态的方式。

方法

1.history.back()

在浏览器历史记录里前往上一页,用户可点击浏览器左上角的返回 (译者注:←) 按钮模拟此方法。等价于 history.go(-1).
Note: 当浏览器会话历史记录处于第一页时调用此方法没有效果,而且也不会报错。

2.history.forward()

在浏览器历史记录里前往下一页,用户可点击浏览器左上角的前进 (译者注:→) 按钮模拟此方法。等价于 history.go(1).
Note: 当浏览器历史栈处于最顶端时 ( 当前页面处于最后一页时 ) 调用此方法没有效果也不报错。

3.history.go()

通过当前页面的相对位置从浏览器历史记录 ( 会话记录 ) 加载页面。比如:参数为-1 的时候为上一页,参数为 1 的时候为下一页。当整数参数超出界限时 ( 译者注:原文为 When integerDelta is out of bounds ),例如:如果当前页为第一页,前面已经没有页面了,我传参的值为-1,那么这个方法没有任何效果也不会报错。调用没有参数的 go() 方法或者参数值为 0 时,重新载入当前页面。( 这点与支持字符串作为 url 参数的 IE 有点不同)。

4.history.pushState()

按指定的名称和 URL(如果提供该参数)将数据 push 进会话历史栈,数据被 DOM 进行不透明处理;你可以指定任何可以被序列化的 javascript 对象。

//spa 单页应用
function fn3(){
    //添加state的值 数据  ""  地址(会产生跨域问题)
    history.pushState('hello','','./index.html') //会改地址 但是不会刷新 推一个历史页面到历史区 state设置进去
}

5.history.replaceState()

按指定的数据,名称和 URL(如果提供该参数),更新历史栈上最新的入口。这个数据被 DOM 进行了不透明处理。你可以指定任何可以被序列化的 javascript 对象。

replace比起push的差异在于,push是进栈把当前页面放在栈中,但是replace是会直接取代当前页面。

function fn4(){
    //替换state
    history.replaceState('world','','/location对象讲解.html') //会改地址 但是不会刷新 在历史区直接修改当前这个历史页面 state设置进去
}

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/278931.html

(0)
上一篇 2022年8月4日
下一篇 2022年8月4日

相关推荐

发表回复

登录后才能评论