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

相关推荐
xvmingjiang18 小时前
Vue 3 中监听多个数据变化的几种方法
前端·javascript·vue.js
我有一只臭臭18 小时前
ES5 和 ES6 类的实现
前端·javascript·es6
excel18 小时前
Three.js 实现高分辨率地球边界可视化
前端
LaoZhangAI18 小时前
Google Gemini AI图片编辑完全指南:50+中英对照提示词与批量处理教程(2025年9月)
前端·后端
用户114818678948418 小时前
从零搭建 Vue3 + Nest.js 实时通信项目:4 种方案(短轮询 / 长轮询 / SSE/WebSocket)
前端·后端
LaoZhangAI18 小时前
Google Gemini Nano与Banana AI完整部署指南:2025年轻量级AI解决方案
前端·后端
用户114818678948418 小时前
基于 Webpack Module Federation 的 Vue 微前端实践
前端
怪可爱的地球人18 小时前
Pinia状态管理有哪些常用API?
前端
小高00718 小时前
🤔函数柯里化:化繁为简的艺术与实践
前端·javascript·面试
却尘18 小时前
React useMemo 依赖陷阱:组件重挂载,状态无限复原
前端·javascript·react.js