js中history总结

JavaScript011

js中history总结,第1张

在这里我们把history简化成一个链表来讨论 , 以下红色数字为 url 当前位置

引起history变化的动作有三类:

页面点击链接,js控制location.href跳转等,我们给这类起名为硬跳转

pushState

replaceState

引起当前位置在表中的变化有两种: 前进、后退

硬跳转:

1)history 表如上,通过回退的方式使当前 url 在 2 处

2)触发硬跳转,history变为如下:

当前位置为 3 ,url为硬跳转的链接

页面:

1)立即变化

2)接下来的前进后退,页面按 history 中的url顺序变化

pushState:

1)history 表如上,当前位置在 2 处,触发pushState方法

2)history 表如下:

当前位置为 3 ,url为push进来的链接

页面:

1)不会立即变化,还是 2

2)接下来的前进后退,1与2都会正常加载页面,但当url到3 时,页面仍是 2,这里没有找到原因,存疑!!!!!

replaceState:

1)history 表如上,当前位置在 2 处,触发 replaceState 方法

2)history 表如下:

当前位置在 2 处,且 url 为 replace 进来的 新url

页面:

1)页面不会立即变化

2)接下来的前进后退,页面按 history 中的url顺序变化

popstate:

需要注意的是,仅仅调用popstate方法或replaceState方法 ,并不会触发该事件,只有用户点击浏览器倒退按钮和前进按钮,或者使用JavaScript调用back、forward、go方法时才会触发。另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。

history -- history用于窗体中的导航

history,中文"历史"

history对象是window对象的属性

浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面。JavaScript的history对象记录了用户曾经浏览过的页面,并可以实现浏览器前进与后退相似的导航功能

可以通过back函数后退一个页面,forward函数前进一个页面,或者使用go函数任意后退或前进页面,还可以通过length属性查看history对象中存储的页面数

history对象函数

JavaScript history.go() 函数

说明:前进或后退指定的页面数

JavaScript history.back() 函数

说明:后退一页

JavaScript history.forward() 函数

说明:前进一页

history对象属性

JavaScript length 属性 --history对象中缓存了多少个URL

示例

history.length

HTML5新添加了对历史的管理,用户可以通过”前进”和”后退”按钮进行历史页面的切换。这让一些不在新页面中打开的新页面前进后退自如,提高了用户体验。

通过haschange事件,可以知道URL的参数什么时候发生了变化,也就是什么时候该有所反应。通过状态管理的API,能够在不加载新页面的情况下改变浏览器的URL。所以需要使用history.pushState()方法。history.pushState()方法接收三个参数:1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)。小例子如下

执行了history.pushState()方法后,新的状态信息就会被加入到历史状态栈,而浏览器地址栏也会变成新的相对URL。但是,浏览器并不会想服务器发送请求,即使历史状态改变之后查新location.href也会返回与地址栏中相同的地址。另外,第二个参数目前还没有浏览器实现,所以完全可以只传入一个空字符串即可,或者一个短标题也可以。第一个参数则应该尽可能提供初始化页面状态所需的各种信息。

因为history.pushState()方法会创建新的历史状态,所以会发现”后退”按钮也可以使用了。按下”后退”按钮,会触发window对象的popstate事件。Popstate事件的事件对象有一个state属性,这个属性就包含着当初以第一个参数传递给pushState()的状态对象。小例子如下

更新状态直接更新当前地址栏的内容,他不会产生后退操作,只是单纯修改当前地址。

要更新当前历史状态,可以调用replaceState(),传入的参数与pushState()方法的前两个参数相同。调用replaceState()不会在历史状态栈中创建新状态,只会重写当前状态。小例子如下

网上例子:

他这个还是创建了一个数组,然后把生成的内容存到数组中,在根据传的值

把数组对应的内容给读出来。

history有个问题是第一次点击是无效的,只有第二次才能起作用。这就非常的不爽了。

通常我们也不会需要他执行特别复杂的操作,反而是hash非常的好用。

hash是直接在url后面加一个#,然后立即可以被onpopstate事件检测到。

于是我们可以这样去做: