popstate_H5,API的pushState(),replaceState()和popstate()用法
pushState和replaceState是H5的API中新添加的两个方法。通过window.history方法来对浏览器历史记录的读写。
pushState和replaceState
在 HTML 文件中, history.pushState() 方法向浏览器历史添加了一个状态。
pushState() 带有三个参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址。
state object — 状态对象是一个由
pushState()方法创建的、与历史纪录相关的JS对象。当用户定向到一个新的状态时,会触发popstate事件。事件的state属性包含了历史纪录的state对象。(译者注:总而言之,它存储JSON字符串,可以用在popstate事件中。)state
对象可以是任何可以序列化的东西。由于 火狐
会将这些对象存储在用户的磁盘上,所以用户在重启浏览器之后这些state对象会恢复,我们施加一个最大640k
的字符串在state对象的序列化表示上。如果你像pushState() 方法传递了一个序列化表示大于640k
的state对象,这个方法将扔出一个异常。如果你需要更多的空间,推荐使用sessionStorage或者localStorage。
title —
火狐浏览器现在已经忽略此参数,将来也许可能被使用。考虑到将来有可能的改变,传递一个空字符串是安全的做法。当然,你可以传递一个短标题给你要转变成的状态。(译者注:现在大多数浏览器不支持或者忽略这个参数,最好用null代替)
URL —
这个参数提供了新历史纪录的地址。请注意,浏览器在调用pushState()方法后不会去加载这个URL,但有可能在之后会这样做,比如用户重启浏览器之后。新的URL不一定要是绝对地址,如果它是相对的,它一定是相对于当前的URL。新URL必须和当前URL在同一个源下;否则,pushState()
将丢出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前URL。
一些情况下,调用pushState和设置 window.location = “#foo”相当,这种状况下,这两种行为都会创建和激活另一个和当前页面有关的历史纪录。但是pushState()有其他优势:
新URL可以是当前URL同源下的任意地址。相反的,设置window.location会让你保持在相同页面,除非你只修改hash.
如果不必要,你可以不改变URL,相反的,将window.location设定为“#foo”;只会创建一个新的历史纪录,如果当前hash不为#foo.
You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.你可以关联任意的数据到你的新历史纪录中。使用基于hash的方法,你需要将所有相关 的数据编码为一个短字符串。
请注意pushState()方法绝不会导致hashchange 事件被激活,即使新的URL和旧的只在hash上有区别。
语法
pushState()和replaceState()参数一样,参数说明如下:
history.pushState(state, title, url);
state:存储JSON字符串,可以用在popstate事件中。
title:现在大多数浏览器不支持或者忽略这个参数,最好用null代替
url:任意有效的URL,用于更新浏览器的地址栏,并不在乎URL是否已经存在地址列表中。更重要的是,它不会重新加载页面。
两个方法的主要区别:pushState()是在history栈中添加一个新的条目,replaceState()是替换当前的记录值。
popstate
当前活动历史项(history entry)改变会触发popstate事件。调用history.pushState()创建新的历史项(history entry),或调用history.replaceState()替换新的历史项(history entry),那么popstate事件的state属性会包含历史项(history entry)状态对象(state object)的拷贝。
需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back())
不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件,但Firefox则不会。
当浏览器触发返回和前进时触发:
window.onpopstate = function(e) {
console.log(e.state);
};
参考:https://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/
popstate_H5,API的pushState(),replaceState()和popstate()用法相关推荐
- H5路由的pushState(),replaceState()和popstate()用法
History路由的pushState,replaceState和popstate的区别 HTML5中引入了history.pushState().history.replaceState().p ...
- h5 的 pushState, replaceState 和 popstate 事件
我们可以使用location.hash来模拟ajax的前进后退功能.但是使用location.hash存在下面几个问题: 1.使用location.hash会导致地址栏的url发生变化,用户体验不够友 ...
- 前端js实现路由切换页面 pushState replaceState
window.history 我们可以通过window.history的两个方法来控制浏览器的路由改变,但不会让浏览器刷新页面. pushState 会追加浏览器的路由历史,但不会刷新页面,可以用这种 ...
- 5. 深入研究 UCenter API 之 MVC 网站下的用法(转载)
1. 深入研究 UCenter API 之 开篇 (转载) 2. 深入研究 UCenter API 之 通讯原理(转载) 3. 深入研究 UCenter API 之 加密与解密(转载) 4. ...
- vue-router 路由 pushstate replacestate popstate 详解
一. 概述 window.history属性指向 History 对象,它表示当前窗口的浏览历史. History 对象保存了当前窗口访问过的所有页面网址.下面代码表示当前窗口一共访问过3个网址. w ...
- ajax与HTML5 history pushState/replaceState实例
一.本文就是个实例展示 三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗 跟搜索引擎搞基 自己备忘 精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...
- HTML5历史状态管理history API-pushState/replaceState与popstate事件
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و [本文源址:http://blog.csdn.net/q1056843325/article/details/60607402 ...
- window history pushState replaceState 跳转原理
一.pushState 比如,当前打开的界面是:https://developer.mozilla.org/en-US/docs/Web/API/History,如下图所示: 在chrome的cons ...
- vue3组合式Composition API之setup函数的具体用法
vue3拉开序幕的setup 理解:Vue3.0中一个新的配置项,值为一个函数. setup是所有Composition API(组合API)" 表演的舞台 ". 组件中所用到的: ...
最新文章
- 自动驾驶平台,阵营, 主要传感器与场景联系
- 阿里三面,P9面试官是如何360°无死角考察候选人的?
- [C# 网络编程系列]专题六:UDP编程
- Linux下安装Redis数据库
- day13-(事务mvc反射补充)
- 森近林之助【字符串处理】
- 怎么删除已经安装的mysql_怎么样删除已经安装的mysql | wdlinux致力于Linux服务器架构,性能优化.免费CDN加速系统,免费智能DNS解析,负载均衡,集群分流...
- centos 升级内核方法
- APT/APT-GET常用信息
- Windows 下安装Python包(Numpy)的错误:Unable to find vcvarsall.bat
- linux dd命令实用详解
- SpringBoot学习---yaml配置
- 振耀退休感言及海辉执行董事长视频访谈
- 哔哩哔哩视频下载神器
- 点是否在三角形内——C++实现
- android定时开关机源码,定时关机程序及源码(易语言)-带设置自动启动功能
- mysql的联接算法_联接算法
- turtle-绘制简易瞄准镜
- 请尊重一个姑娘的努力 (文/杨熹文)
- Xshell 4 SSH隧道跳转访问局域网服务器