history api 与 hashchange

标签：win   length   ack   pop   页面   替换   state   cat   OLE   

window.onpopstate = console.log
window.onhashchange = console.log
1. history.pushState({a:1,b:2}, ‘title‘, ‘/test‘)   // /test
2. history.pushState({test:2,b:33}, ‘title2‘, ‘/test2‘) // /test2
3. history.back()  // /test  log: {state:{a:1,b:2},...other}
4. history.forward() // /test2 log: {state:{test:2,b:33}, ...other}
5. history.back()
6. history.pushState({test: 3, b:44}, ‘title3‘, ‘/test3‘) // history.length === 2 /test2被删除
7. location.hash = ‘#test3‘ // 会立刻触发onpopstate与hashchange 并且增加history记录。
8. history.pushState(null,‘‘,‘#a‘) // 不会触发history与hashchange
9. history.back()     // 触发history与hashchange

总结

1. replaceState与pushState 相似，会替换替换url， 不会增加history长度
2. 不在history最顶层的时pushState 会将此url 上层的记录替换为 pushSate的那条记录。
3. 刷新页面，当前url 置为 history最顶层（删除此url以后的记录），此url以下的记录不变。
4. hashchange 事件触发条件为，非pushState和replaceState 引起的hash变化
5. onhashchange 事件触发条件为， 非pushState和replaceState 引起的 url变化。
6. locaiton.href 操作只改hash 会触发2个事件。但是如果改了url 则会重新加载，不管是否有history记录。

history api 与 hashchange

标签：win   length   ack   pop   页面   替换   state   cat   OLE   

原文地址：https://www.cnblogs.com/gsgs/p/12989831.html