window.history对象

Posted 2020-11-24 lyralee

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