window.history对象

1. 只读属性

1. length

表示当前窗口访问过的url的数量;或者手动pushState之后的length。

2.state

表示当前地址栏中网址对应的状态。

2. 方法

1. 刷新网页-back()、forward()、go(num)

1. 回退一个地址,相当于浏览器的后退键;对第一个网址无效

history.back() 
// 或者
history.go(-1)

2. 前进一个地址,相当于浏览器的前进键;对最后一个网址无效

history.forward()
// 或者
history.go(1)

3. 根据参数大小进行前进或者回退的个数

go(n);
当n>0时,前进n个历史记录;当n>history.length时,失效。
go(0); 刷新当前页面
当n<0时,后退n个历史记录;当n>history.length时,失效。

2.不刷新网页-pushState()

可以改变当前地址栏的url,且在历史记录中添加一条; 但是不会刷新页面。

window.history.pushState(state, title, url)
//  state是一个和url关联的值,在popstate事件中可能有用
//  title一般空字符串,也可以设置一个其他值
//  url可以只写域名后面的部分,表示在当前域名下修改;也可以写绝对路径

而且,pushState也不会触发popstate, hashchange事件。

为了安全,url只能是同域名网址。

3. 不刷新页面-replaceState(state,title,url)

功能是修改history对象的当前记录。其他参数和pushState相同。

它也不会刷新页面,不会触发popstate, hashchange监听事件。

3. 事件

1. popstate事件

只要同一个文档的history对象的当前记录,发生显示的切换,就会触发popstate事件。

触发方式

1)手动单击浏览器前进后退按钮

2)代码调用history.back(), history.forward(), history.go(n)

⚠️浏览器首次加载与否,不一定

2. hashchange事件

事件包含oldURL和newURL两个属性。

#符号后面的内容发生变化,触发该事件。从无#到有#,或者从有#到无#,都不会触发该事件。

触发方式:

1)手动单击浏览器前进后退键过程中,如果有hash内容变换,触发

2)history.back(), history.forward(), history.go(n)同理

3) 给location.hash赋值

location.hash = 4

猜你喜欢

转载自www.cnblogs.com/lyraLee/p/11992785.html