pushState
与replaceState
方法,今天抽空了解一下,这篇文章很大一部分转载了MDN的Manipulating the browser history以及window.onpopstate中的内容,有兴趣的同窗能够直接参考这些文章HTML5引入了 history.pushState() 和 history.replaceState() 方法,它们分别能够添加和修改历史记录条目。这些方法一般与window.onpopstate 配合使用。javascript
假设在 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
事件时可能会改变本身的内容,其内容仍与以前的展示一致。安全
pushState()
须要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL. 让咱们来解释下这三个参数详细内容:函数
状态对象 — 状态对象state是一个JavaScript对象,经过pushState () 建立新的历史记录条目。不管何时用户导航到新的状态,popstate事件就会被触发,且该事件的state属性包含该历史记录条目状态对象的副本。网站
标题 — 目前忽略这个参数被忽略,但将来可能会用到。传递一个空字符串在这里是安全的,而在未来这是不安全的。二选一的话,你能够为跳转的state传递一个短标题。ui
URL — 该参数定义了新的历史URL记录。注意,调用
pushState()
后浏览器并不会当即加载这个URL,但可能会在稍后某些状况下加载这个URL,好比在用户从新打开浏览器时。新URL没必要须为绝对路径。若是新URL是相对路径,那么它将被做为相对于当前URL处理。新URL必须与当前URL同源,不然pushState()
会抛出一个异常。该参数是可选的,缺省为当前URL。google
在某种意义上,调用 pushState()
与 设置 window.location = "#foo"
相似,两者都会在当前页面建立并激活新的历史记录。但 pushState()
具备以下几条优势:编码
新的 URL 能够是与当前URL同源的任意URL 。而设置 window.location 仅当你只修改了哈希值时才保持同一个文件。
若是须要,能够没必要改变URL就能建立一条历史记录。而设置
window.location = "#foo"
;,只有在当前哈希不是#foo
的状况下, 才会建立一个新的历史记录项。
咱们能够为新的历史记录项关联任意数据。而基于哈希值的方式,则必须将全部相关数据编码到一个短字符串里。
history.replaceState()
的使用与 history.pushState()
很是类似,区别在于 replaceState()
是修改了当前的历史记录项而不是新建一个。
每当处于激活状态的历史记录条目发生变化时,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()
方法)。
假如当前网页地址为 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()
主要是它能够监听到浏览器上的返回事件,这在移动端上也一样适用,参考以下一段代码(能够直接运行):
<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>
复制代码
'pushState'、'replaceState'MDN文档(中文翻译版)
原文发表于王玉略的我的网站