history对象

history对象用来存储历史浏览记录(URL),并且提供了一系列属性和方法用来表示和操作这些记录。
其中存储历史浏览记录的规则为:

如图所示,当在同一个窗口进入不同的页面(URL)时,比如从page1进入page2,再进入page3,page4。此时,历史记录为page1-page2-page3-page4,如果后退到page2,再进入page5,page6。此时记录为page1-page2-page5-page6。
history对象属性:
length:表示目前保存的历史记录数量。
state:表示当前浏览的页面的状态对象。
scrollRestoration:允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的(auto)或者手动的(manual)。
history对象方法(html5新增了pushState和replaceState方法
back():模拟浏览器后退按钮,相当于history.go(-1)。
forward():模拟浏览器前进按钮,相当于history.go(1)。
go():在历史浏览记录中任意跳转,正整数为向前,负整数为向后,零为刷新当前页面。当超出临界值时也不报错,只是不跳转。
pushState(state, title, url): 向浏览记录中添加一条记录,和之前规则一样,会覆盖当前页面前端所有记录。页面的url会变成新添加的记录,但是页面内容还是之前的,不会刷新页面。而location.hash只在当前页面url后面添加东西,并不会添加新的浏览记录,浏览器的前进后退也是没法控制的。
其中参数:
state:状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。
title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。
url:新历史记录的地址,使用./ ../ 和/来控制在哪里添加内容。新URL必须和当前URL在同一个域,否则,pushState()将丢出异常
replaceState(state, title, url): 和pushState一样的参数,区别就是replaceState只是改变当前url,并不会向历史记录中添加一条记录。
popState事件:每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件
需要注意的是,仅仅调用pushState方法或replaceState方法,并不会触发该事件,只有用户点击浏览器倒退按钮和前进按钮,或者使用javascript调用back()、forward()、go()方法时才会触发。另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值