简单聊聊H5的pushState与replaceState的用法


Posted in HTML / CSS onApril 03, 2018

一、简介

HTML5引入了 history.pushState() 和 history.replaceState() 方法,它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate 配合使用。

二、pushState() 方法的例子

假设在 http://mozilla.org/foo.html 中执行了以下 JavaScript 代码:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

这将使浏览器地址栏显示为 http://mozilla.org/bar.html,但并不会导致浏览器加载 bar.html ,甚至不会检查bar.html 是否存在。

假设现在用户又访问了 http://google.com,然后点击了返回按钮。此时,地址栏将显示 http://mozilla.org/bar.html,同时页面会触发 popstate 事件,事件对象state中包含了 stateObj 的一份拷贝。页面本身与 foo.html 一样,尽管其在 popstate  事件中可能会修改自身的内容。

如果我们再次点击返回按钮,页面URL会变为http://mozilla.org/foo.html,文档对象document会触发另外一个 popstate 事件,这一次的事件对象state object为null。 这里也一样,返回并不改变文档的内容,尽管文档在接收 popstate 事件时可能会改变自己的内容,其内容仍与之前的展现一致。

三、pushState() 方法

pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL. 让我们来解释下这三个参数详细内容:

状态对象 — 状态对象state是一个JavaScript对象,通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态,popstate事件就会被触发,且该事件的state属性包含该历史记录条目状态对象的副本。

标题 — 目前忽略这个参数被忽略,但未来可能会用到。传递一个空字符串在这里是安全的,而在将来这是不安全的。二选一的话,你可以为跳转的state传递一个短标题。

URL — 该参数定义了新的历史URL记录。注意,调用 pushState() 后浏览器并不会立即加载这个URL,但可能会在稍后某些情况下加载这个URL,比如在用户重新打开浏览器时。新URL不必须为绝对路径。如果新URL是相对路径,那么它将被作为相对于当前URL处理。新URL必须与当前URL同源,否则 pushState() 会抛出一个异常。该参数是可选的,缺省为当前URL。

四、pushState() 方法与设置hash值的区别

在某种意义上,调用 pushState() 与 设置 window.location = "#foo" 类似,二者都会在当前页面创建并激活新的历史记录。但 pushState() 具有如下几条优点:

新的 URL 可以是与当前URL同源的任意URL 。而设置 window.location 仅当你只修改了哈希值时才保持同一个文件。

如果需要,可以不必改变URL就能创建一条历史记录。而设置 window.location = "#foo";,只有在当前哈希不是 #foo 的情况下, 才会创建一个新的历史记录项。

我们可以为新的历史记录项关联任意数据。而基于哈希值的方式,则必须将所有相关数据编码到一个短字符串里。

五、replaceState() 方法

history.replaceState() 的使用与 history.pushState() 非常相似,区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。

六、popstate 事件

每当处于激活状态的历史记录条目发生变化时,popstate 事件就会在对应window对象上触发。 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝。

我们也可以直接在history对象上获取state,如下:

var currentState = history.state;

需要注意的是,调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。 opstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)。

七、popstate 事件的例子

假如当前网页地址为 http://example.com/example.html ,则运行下述代码后:

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数. 
history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

八、pushState()的用途

王二使用 pushState() 主要是它可以监听到浏览器上的返回事件,这在移动端上也同样适用,参考如下一段代码(可以直接运行):

<body>
    <div>window.onpopstate可以监听到返回键事件</div>
    <script>
        history.pushState({}, ""); 
        window.onpopstate = function(event) {
            //这里可以监听到浏览器的返回事件,并做你想做的事情,
            //例如:跳转到另一个网页
            location.href = "https://www.baidu.com";
        };
    </script>
</body>

当然,用 window.onhashchange 也可以监听到浏览器上的返回事件,参考如下一段代码(可以直接运行):

<body>
    <div>window.onhashchange可以监听到返回键事件</div>
    <script>
        setTimeout(()=>{
            location.hash="a"
        },100);
        setTimeout(()=>{
            window.onhashchange = function(event) {
                location.href = "https://www.baidu.com";
            }
        },200);
    </script>
</body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 #HTML / CSS
Html5 localStorage入门教程
Apr 26 #HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 #HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 #HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 #HTML / CSS
html5调用摄像头功能的实现代码
May 07 #HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 #HTML / CSS
You might like
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
PHP仿盗链代码
2012/06/03 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
Python测试模块doctest使用解析
2019/08/10 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
python3 字符串知识点学习笔记
2020/02/08 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
营销人才自我鉴定范文
2013/12/25 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
自行车广告词大全
2014/03/21 职场文书
行政前台岗位职责
2015/04/16 职场文书
2015年工程师工作总结
2015/04/30 职场文书
妈妈别哭观后感
2015/06/08 职场文书
环保主题班会教案
2015/08/13 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers