一、前言
上篇提到的‘onbeforeunload’，是一个很实用的工具。onbeforeunload可以在用户刷新或关闭页面前执行自定义的JS事件， 适当得运用可以避免用户进行误操作而导致错失珍贵资源（例如填写了很久的表单，不小心刷新页面，且表单没有实时保存功能），且可以有效地减少盈利网站的用户流失量，除此之外，开发者还可以进行一些有用的操作如一次性处理页面数据的本地缓存等。
值得注意的是，onbeforeunload并非W3C DOM-Event标准事件，各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异（详情见上篇文章：http://www.jianshu.com/p/178d9b9adcb3） ，使用onbeforeunload需要考虑各浏览器造成的不确定性，有没有另一种方式实现页面关闭前的事件呢？当然有。
本文将讨论使用window.history实现页面关闭前事件。
二、window.history基础用法
DOM对象通过history对象提供对浏览器历史的访问。功能包括跳转至用户历史浏览记录（鼠标在浏览器工具栏的前进／后退按钮处右键可查看用户历史浏览记录），从HTML5开始，还包括操作用户浏览历史堆栈的功能。
2.1 跳转到历史记录
后退
window.history.back(); //后退到上一个历史页面，类似用户在浏览器工具栏上点击返回按钮
前进
window.history.forward(); //前进到下一个历史页面，类似用户在浏览器工具栏上点击前进按钮
跳转至指定历史记录点
指定一个相对于当前页面位置的数值，用go（数值）的方法加载历史页面。
例如后退一页：
window.history.go(-1); //后退到上一个历史页面，相当于window.history.back(); ```
例如前进两页：
window.history.go(2); //前进到下两个历史页面，相当于执行两次window.history.forward();
##2.2 添加／修改历史记录
HTML5新增了history.pushState()与history.replaceState()方法，可用于添加历史记录条目与修改历史记录条目。
#####history.pushState()
history.pushState()传入三个参数：状态对象、标题，可选的URL地址，如history.pushState({time:new Date().getTime(), username: 'ice-cream'}, "test", "test-history.html");
【参数说明】
- 状态对象：javascript对象，可添加多对键值，用于描述当前页的状态，状态对象的最大长度为640k，超出最大长度则抛出异常。
例如添加时间戳和用户名键值，此状态对象为
{
time:new Date().getTime(),
username: 'ice-cream'
}
- 标题：字符串，表示将要进入的状态，可传空字符串。
- 地址：新增历史条目的url地址，此url地址应与当前url地址是同源的，否则将抛出异常。
【结果】
执行history.pushState()后，
- 浏览器地址栏的地址修改为新增地址
- 浏览器不会在加载新增地址
- 当前页的状态切换为新增的状态
#####history.replaceState()
与history.pushState()的用法一样，但是表示的是修改当前的历史记录条目。
##2.3 监听popstate事件
当前历史记录状态发生变化时（换句话说，当前的页面跳转到其他历史页面时），会触发popstate事件。
注意：当网页首次加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会。
【用法】
window.onpopstate = func; //func表示函数名
//例如
window.onpopstate = function() {
alert('test');
};
//触发window.onpopstate
history.go(-1);
#三、用window.history实现页面关闭前事件
用window.history实现页面关闭前事件的思路是，在浏览历史堆栈中，插入一条链接是当前链接的历史条目。
【插入历史堆栈】
//假设当前页面关闭前需要出现一个自定义弹框
//若当前页面的历史记录没有设置state属性，copy1页面是第一个页面
if(!history.state || history.state&&history.state.type == "copy1") {
//为当前页面的历史记录添加state属性为‘copy1’
history.replaceState({
type: 'copy1'
}, '2', location.href);
//新增一个当前页面链接的历史记录，state属性我哦‘copy2’，copy2是copy1的副本
history.pushState({
type: 'copy2'
}, '2', location.href);
}
【监听popstate修改历史状态事件】
window.onpopstate = function(e) {
//若是第一个页面，即copy1
if(history.state && history.state.type && history.state.type == "copy1") {
//显示弹框mask
document.getElementById('mask').style.display = 'block';
}else {
document.getElementById('mask').style.display = 'none';
}
}
【图示例】
若当前页面为copy2时，点击后退，进入和copy2页面相同的copy1页面。
>参考文章：
1. http://frontenddev.org/article/html-5-pushstate-popstate-operating-history-no-refresh-to-change-the-current-url.html
>2. https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history
————
前端 · 超大份冰淇淋
纸上得来终觉浅，绝知此事要躬行
网友评论