HTML5-原生History

更多内容,访问:

history
hash
单页面应用和多页面应用
React-Router源码分析-History库
History库源码分析-Action 动作类型
History库源码分析-createLocation
History库源码分析-createPath
History库源码分析-parsePath

history


浏览器历史记录对象

属性:
  • length: 历史记录对象长度
方法:
  • go(n):

    跳转到相应的历史记录,以当前历史记录为标准线0,回到之前历史记录,为负值,比如回到上一页,n就是-1,向后,就是正值,如果n === 0,相当于刷新当前页面。

  • back():

    回到上一页,相当于浏览器后退按钮,也可以用go(-1)实现

  • forward():

    前进到下一页,相当于浏览器前进按钮,也可以用go(1)实现

HTML5 对 History API 新增的两个方法:pushState()、replaceState(),均具有操纵浏览器历史记录的能力

  • history.pushState(state, title, url)

    • state:用于存储该 url 对应的状态对象,可以通过 history.state 获取
    • title:标题,目前浏览器并不支持
    • url:定义新的历史 url 记录,需要注意,新的 url 必须与当前 url 同源,不能跨域

    pushState 函数会向浏览器的历史记录中添加一条,history.length 的值会 +1,当前浏览器的 url 变成了新的 url。需要注意的是:仅仅将浏览器的 url 变成了新的 url,页面不会加载、刷新。

  • replaceState:

    replaceState 的使用与 pushState 非常相似,都是改变当前的 URL,页面不刷新。区别在于 replaceState 是修改了当前的历史记录项而不是新建一个,history.length 的值保持不变。

监听事件


1. popstate事件

每当history对象出现变化时,就会触发popstate事件。

通过 a 标签或者 window.location 进行页面跳转时,都会触发 window.onload 事件,页面完成渲染。点击浏览器的后退键或前进键,根据浏览器的不同机制,也会重新加载(Chrome 浏览器),或保留之前的页面(Safari 浏览器)。而对于通过 history.pushState() 或 history.replaceState() 改变的历史记录,点击浏览器的后退键或前进键页面是没有反应的,那该如何控制页面渲染呢?为了配合 history.pushState() 或 history.replaceState(),HTML5 还新增了一个事件,用于监听 URL 历史记录改变:window.onpopstate()。

注意事项:

  • 仅仅调用pushState()方法或replaceState()方法 ,并不会触发该事件;

  • 只有用户点击浏览器倒退按钮和前进按钮,或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发;

  • 单纯的a标签不会触发;

  • 另外,上面浏览器回退和前进事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。页面第一次加载的时候,浏览器不会触发popstate事件。使用的时候,可以为popstate事件指定回调函数,回调函数的参数是一个 event 事件对象,它的 state 属性指向当前的 state 对象;

2. hashchange事件

每当hash值发生变化时,就会触发hashchange事件,hash值的变化也会触发popstate事件

注意事项:


  • 仅仅调用pushState()方法或replaceState()方法 ,并不会触发该事件;

  • 另外,上面浏览器回退和前进事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。页面第一次加载的时候,浏览器不会触发hashchange事件。使用的时候,可以为hashchange事件指定回调函数,回调函数的参数是一个 event 事件对象,它的 state 属性指向当前的 state 对象。

相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法