htistory: pushSate、replaceState、popState

概要

pushState、和replaceSate是h5 htistory新增接口,作用是不刷新页面改变url地址。pushState会在当前历史记录栈上新增一条记录,并且history指针指向新增记录。
replaceSate会将当前栈顶的url更改为新增的url,指针不变。
popState是一个window对象监听事件,可以监听浏览器的前进后退事件。

history.pushSate

history.pushState(sate, title, url) 带有三个参数:一个状态对象,一个标题(现在被忽略了,用null代替),以及一个可选的URL地址。
sate参数是一切可以被序列化对象。在popState事件中通过事件对象event.sate获取。
title: 由于大多数浏览器忽略或为实现此参数,所以应该用null代替.
url: 可以是绝对路径和相对路径。绝对路径要保持同源策略规则。

history.replaceSate

函数参数同pushSate

window.onpopState

window.onpopState = function(e) {
console.log(e.state) //用pushSate、replaceSate生成的历史记录页面,才有e.sate,
且e.sate就是pushSate、或replaceSate的第一个参数。
}
replaceSate、pushSate方法不会触发popState事件。用history.back()、history.forward()、history.go()方法、或用户点击前进后退才会触发popSate事件

应用

单页面应用,通过h5 historyApi来改变路由和页面内容。

插件

  • pjax: jquery插件,pushSate结合ajax。
  • hitsory: 对于不兼容history新接口的浏览器实现history hash方法兼容。

MDN history操作文档
参考

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • /*Returns thenumberof entries in the joint sessionhistory...
    heachou阅读 3,882评论 0 1
  • 一. Backbone的江湖地位: backbone作为一个老牌js框架为大规模前端开发提供了新的开发思路:前端M...
    Michael_bdb5阅读 4,824评论 0 4
  • 很多时候 从洗手间从来 总是会有意不经意的看一眼镜子却从未跟别人说过 有时对镜子里的那个特陌生一辈子太短 能做好一...
    9bf19a4010ab阅读 1,715评论 0 0
  • 数学老师在讲台黑板上,手执白色粉笔唰唰写下从1到8,这八个数字。 转过身,在讲台上给班上所有学生一一讲解。当她讲到...
    林子源阅读 5,416评论 2 22
  • 爱比记忆更长久,谁能如你般浪漫一生。 ——恋恋笔记本 一个讲述纯白与鲜...
    微光222阅读 3,443评论 2 0

友情链接更多精彩内容