简单聊聊H5的pushState与replaceState

时间 2019-11-21

标签简单聊聊 h5 pushstate replacestate 繁體版

原文原文链接

以前一直不熟悉history上的`pushState`与`replaceState`方法，今天抽空了解一下，这篇文章很大一部分转载了MDN的Manipulating the browser history以及window.onpopstate中的内容，有兴趣的同窗能够直接参考这些文章

1、简介

HTML5引入了 history.pushState() 和 history.replaceState() 方法，它们分别能够添加和修改历史记录条目。这些方法一般与window.onpopstate 配合使用。javascript

2、pushState() 方法的例子

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

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

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

假设如今用户又访问了 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 事件时可能会改变本身的内容，其内容仍与以前的展示一致。安全

3、pushState() 方法

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

状态对象 — 状态对象state是一个JavaScript对象，经过pushState () 建立新的历史记录条目。不管何时用户导航到新的状态，popstate事件就会被触发，且该事件的state属性包含该历史记录条目状态对象的副本。网站

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

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

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

在某种意义上，调用 pushState() 与设置 window.location = "#foo" 相似，两者都会在当前页面建立并激活新的历史记录。但 pushState() 具备以下几条优势：编码

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

若是须要，能够没必要改变URL就能建立一条历史记录。而设置 window.location = "#foo";,只有在当前哈希不是 #foo 的状况下，才会建立一个新的历史记录项。

咱们能够为新的历史记录项关联任意数据。而基于哈希值的方式，则必须将全部相关数据编码到一个短字符串里。

5、replaceState() 方法

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

6、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()方法)。

7、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}
复制代码

8、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>
复制代码

9、参考文章

'pushState'、'replaceState'MDN文档(中文翻译版)

'onpopstate'MDN文档(中文翻译版)

原文发表于王玉略的我的网站