js中history总结

JavaScript05

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.js 已经停止开发了,试试它的延伸开发的 hashchange.js 吧,原理就是把 hash# 暂存成一个 location,用 "返回" 键的时侯就会把 # 当作页面返回而不会直接跳转到 index

看参考资料

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

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

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