一、简介
html5引入了 history.pushstate() 和 history.replacestate() 方法，它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate 配合使用。
二、pushstat小学班主任e() 方法的例子
假设在 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;
需要注意的是，调用cf鼠标灵敏度 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,条目索引为1history.pushstate({page: 2}, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2history.replacestate({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?pa大鹿岛ge=2 变为 http://ex..?page=3,条目索引为3history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"history.back(); // 弹出 "location: http://example.com/example.html, state: nullhistory.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> ttimeout(()=>{ location.hash="a" },100); ttimeout(()=>{ window.onhashchange = function(event) { location.href = "https://www.baidu.com"; } },200); </script></body>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文发布于:2023-04-03 08:25:21，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/c0b955f34fd67d7c87d2b8af8d442986.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：简单聊聊H5的pushState与replaceState的用法.doc
本文 PDF 下载地址：简单聊聊H5的pushState与replaceState的用法.pdf
| 留言与评论（共有 0 条评论） |
