一、popstate用来做什么的？
简而言之就是HTML5新增的用来控制浏览器历史记录的api。
二、过去如何操纵浏览器历史记录？
window.history 对象，该对象上包含有 length 和 state 的两个值，在它的 __proto__ 上继承有 back 、forward 、go 等几个功能函数
在 popstate 之前，我们可以利用 back 、forward 、go 对 history 进行后退和前进操作。
例如：
history.back();
// 后退一步，使用history.go(-1)也可实现后退效果
弊端：只能操作前进后退，但是无法控制前进后要去哪， history.length 都只会维持原来的状态
三、popstate的怎么用？
HTML5 的新 API 扩展了 window.history ，使历史记录点更加开放了。可以存储当前历史记录点 pushState 、替换当前历史记录点 replaceState 、监听历史记录点 popstate 。
pushState 、 replaceState 两者用法差不多。
使用方法：
history.pushState(data,title,url);
/* 其中第一个参数data是给state的值；
* 第二个参数title为页面的标题，但当前所有浏览器都忽略这个参数，传个空字符串就好；
* 第三个参数url是你想要去的链接；
*/
replaceState用法类似，例如：
history.replaceState("首页", "", location.href + "#news");
两者区别： pushState 会改变 history.length，而 replaceState 不改变 history.length
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>popstate玩转浏览器历史记录</title>
</head>
<body>
<span class="js-news">新闻</span>
<span class="js-music">音乐</span>
<script>
var locationHref = location.href;
document.addEventListener("click", function (event) {
var target = event.target;
if (target.className == "js-news") {
history.pushState("首页", "", locationHref + "#news");
} else if (target.className == "js-music") {
history.pushState("音乐", "", locationHref + "#music");
}
});
/* document.addEventListener("click",function(event){
var target = event.target;
if(target.className == "js-news"){
history.replaceState("首页","",locationHref + "#news");
}else if(target.className == "js-music"){
history.replaceState("音乐","",locationHref + "#music");
}
});*/
window.addEventListener("popstate", function () {
console.log(history.state);
})
</script>
</body>
</html>
通过下图我们可以对比看出 pushState 和 replaceState 的差别（注意看 history.length 的变化）：
pushState
replaceState
四、监听浏览器状态（popstate）变化事件
当活动历史记录条目更改时，将触发 popstate 事件。如果被激活的历史记录条目是通过对 history.pushState 的调用创建的，或者受到对 history.replaceState 的调用的影响，popstate 事件的 state 属性包含历史条目的状态对象的副本。
可以理解为监听浏览器后退、前进的操作，只要后退或者前进就会触发。在上面的 demo 中，我们预先做了如下操作： 打开页面 → 点击“新闻” → 点击“音乐” → 再点击“新闻”，产生了4个 history 记录。然后监听浏览器后退和前进的状态变化，如下图所示：
popstate
需要注意的是调用
history.pushState 或 history.replaceState 不会触发 popstate 事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在 Javascript 代码中调用 history.back）不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit)
popstate 事件，但 Firefox 则不会。
属性
| Property | Type | Description |
|---|---|---|
target | 只读 |
EventTarget |
The browsing context (window). |
type | 只读 |
DOMString |
The type of event. |
bubbles | 只读 |
Boolean |
Whether the event normally bubbles or not. |
cancelable | 只读 |
Boolean |
Whether the event is cancellable or not. |
state | 只读 |
any | The current history entry's state object (if any). |
浏览器兼容性
- Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | Yes | 4.0 (2) | 10.0 | Yes | limited |
- Mobile
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 3.0 (buggy in 2.2 and 2.3) | 4.0 (2) | 10.0 | Yes | limited |
网友评论