JavaScript中的history对象

本文主要是介绍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设置进去
}

这篇关于JavaScript中的history对象的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！