--- title: window.onpopstate slug: Web/API/Window/onpopstate translation_of: Web/API/WindowEventHandlers/onpopstate ---
{{ ApiRef() }}
{{ gecko_minversion_header("2") }}
window.onpopstate
是popstate
事件在window对象上的事件处理程序.
每当处于激活状态的历史记录条目发生变化时,popstate
事件就会在对应window
对象上触发. 如果当前处于激活状态的历史记录条目是由
history.pushState()
方法创建,或者由history.replaceState()方法修改过
的, 则popstate事件对象的
state
属性包含了这个历史记录条目的state对象的一个拷贝.
注意:调用history.pushState()
或者history.replaceState()
不会触发popstate事件. popstate
事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()
方法),此外,a 标签的锚点也会触发该事件.
当网页加载时,各浏览器对popstate
事件是否触发有不同的表现,Chrome 和 Safari会触发popstate
事件, 而Firefox不会.
window.onpopstate = funcRef;
funcRef
是个函数名.假如当前网页地址为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和replaceState方法作用过的(比如http://example.com/example.html)没有state对象关联的那些网页, popstate
事件也仍然会被触发.
本页面的兼容性表格是由结构化数据生成的。如果你愿意为这些数据做点贡献,请在 github https://github.com/mdn/browser-compat-data 检出代码,然后发送 pull request 给我们。
{{Compat("api.WindowEventHandlers.onpopstate")}}
{{ languages( {"en": "en/DOM/window.onpopstate" } ) }}