pushState与replaceState运用步骤详解
一、简介
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> <p>window.onpopstate可以监听到返回键事件</p> <script> history.pushState({}, ""); window.onpopstate = function(event) { //这里可以监听到阅读器的返回事件,并做你想做的事情, //例如:跳转到另一个网页 location.href = "https://www.baidu.com"; }; </script> </body>
当然,用 window.onhashchange 也可以监听到阅读器上的返回事件,参照 如下一段代码(可以直接运转):
<body> <p>window.onhashchange可以监听到返回键事件</p> <script> setTimeout(()=>{ location.hash="a" },100); setTimeout(()=>{ window.onhashchange = function(event) { location.href = "https://www.baidu.com"; } },200); </script> </body>
信赖看了本案牍例你已经把握了办法,更多出色请关注百分百源码网其它相关文章!
引荐阅读:
H5+WebWorkers多线程开发使用详解
CSS3二级导航菜单制作步骤详解
以上就是pushState与replaceState使用步骤详解的具体内容,更多请关注百分百源码网其它相关文章!