zoukankan      html  css  js  c++  java
  • history 与 hashchange 原生 api

    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. hashchange 事件触发条件为,非pushState和replaceState 引起的hash变化
    4. onhashchange 事件触发条件为, 非pushState和replaceState 引起的 url变化。
    5. locaiton.href 操作只改hash 会触发2个事件。但是如果改了url 则会重新加载,不管是否有history记录。
    6. 刷新页面history依然保存
    7. location.href 在页面加载时自动跳转去其他页面时,不会记录history,但如果手动点击按钮跳转,不管是否是异步,都会记录history.
  • 相关阅读:
    函数细节
    ElementUI的Table组件自定义合计行内容
    好看的字体收藏
    MD5加密生成与SHA526加密生成
    XML和Map之间互相转换
    银联支付
    微信支付开发
    MySql创建索引,添加索引
    jqgrid分级表格合并
    关于C# XmlDocument方法Load加载流后自动释放流的解决方法
  • 原文地址:https://www.cnblogs.com/gsgs/p/12989831.html
Copyright © 2011-2022 走看看