js中history总结

JavaScript012

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

hash模式是监听 hashchange 事件来实现的。

hash是监听 popstate 事件来实现的，但有点小问题需要处理一下。

history.replaceState 和 history.pushSstate 不触发 popstate 事件，这个问题可以自定义一个方法来实现。