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 对象。

相关推荐
前端爆冲7 分钟前
项目中无用export的检测方案
前端
热爱编程的小曾35 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin1 小时前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox