简朴聊聊H5的pushState与replaceState的用法
|
HTML5引入了 和 要领，它们别离可以添加和修改汗青记录条目。这些要领凡是与window.onpopstate 共同行使。 二、pushState() 要领的例子 假设在 中执行了以下 JavaScript 代码: var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html"); 这将使赏识器地点栏表现为 ，但并不会导致赏识器加载 bar.html ，乃至不会搜查bar.html 是否存在。 假设此刻用户又会见了 ，然后点击了返回按钮。此时，地点栏将表现 ，同时页面会触发 popstate 变乱，变乱工具state中包括了 stateObj 的一份拷贝。页面自己与 foo.html 一样，尽量其在 popstate 变乱中也许会修改自身的内容。 假如我们再次点击返回按钮，页面URL会变为，文档工具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 变乱的例子 若是当前网页地点为 ,则运行下述代码后: window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); }; //绑定变乱处理赏罚函数. history.pushState({page: 1}, "title 1", "?page=1"); //添加并激活一个汗青记录条目 ?page=1,条目索引为1 history.pushState({page: 2}, "title 2", "?page=2"); //添加并激活一个汗青记录条目 ?page=2,条目索引为2 history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的汗青记录条目 ?page=2 变为 ?page=3,条目索引为3 history.back(); // 弹出 "location: ?page=1, state: {"page":1}" history.back(); // 弹出 "location: , state: null history.go(2); // 弹出 "location: ?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> （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
