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

相关推荐
牧羊狼的狼3 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手5 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲5 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell5 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮7 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel7 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip8 小时前
JavaScript事件流
前端·javascript
赵得C8 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG8 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904278 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js