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()方法时才会触发。另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容