前端离开页面事件总结

onbeforeunload

onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。
该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 “确定要离开此页吗？”。该信息不能删除。
但你可以自定义一些消息提示与标准信息一起显示在对话框。
注意： 如果你没有在 元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使用 returnValue 属性创建自定义信息(查看以下语法实例)。
注意： 在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。

兼容性

onunload

浏览器卸载页面后执行的事件, 虽然网上的资料没说什么兼容性的问题，但是实践发现兼容性并不理想。

浏览器兼容情况

IE6，IE7，IE8 中 刷新页面、关闭浏览器之后、页面跳转之后都会执行；
IE9 刷新页面 会执行，页面跳转、关闭浏览器不能执行；
firefox(包括firefox3.6) 关闭标签之后、页面跳转之后、刷新页面之后能执行，但关闭浏览器不能执行；
Safari 刷新页面、页面跳转之后会执行，但关闭浏览器不能执行；
Opera、Chrome 任何情况都不执行

onunload onbeforeunload 他们的区别

onunload，onbeforeunload都是在刷新或关闭时调用，可以在script脚本中通过 window.onunload来调用。区别在于onbeforeunload在onunload之前执行，它还可 以阻止onunload的执行。
onbeforeunload 是正要去服务器读 取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。

onpagehide

onpagehide 事件在用户离开网页时触发。
离开网页有多种方式。如点击一个链接，刷新页面，提交表单，关闭浏览器等。.
onpagehide 事件有时可以替代 onunload 事件，但 onunload 事件触发后无法缓存页面。
为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false 。
浏览器支持
表格中的数字表示支持该事件的第一个浏览器的版本号。

document.addEventListener(“visibilitychange”, function(){});

简单的说，浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。
这个事件可以满足一些用户需求，比如标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询，还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销。
这个事件已经得到现代浏览器广泛的支持，不过一些老版本的浏览器需要加相应的前缀。
Chrome (Webkit) Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
13前缀webkit
33无需前缀
10前缀moz
18无需前缀 10前缀ms 12.10 最新的测试已经支持
注：Opera 12.10浏览器在最小化时不触发visibilitychange事件,也不将hidden属性设置为true.

document的可见性属性
Page Visibility (Second Edition)中定义了2个只读的document属性：hidden和visibilityState。
其中document.hidden是一个布尔值，简单的表示标签页显示或者隐藏。而document.visibilityState属性更为详细，目前有四个可能的值：
visible : 页面内容至少部分可见。这意味着在实际情况中，该网页是一个非最小化窗口的可见标签页。
hidden : 页面内容是对用户不可见。实际上，这意味着该文档是后台标签页或最小化窗口的一部分，或者系统锁屏是时的状态。
prerender : 网页内容被预渲染并且用户不可见。
unloaded : 如果文档被卸载，那么这个值将被返回。
一般情况下我们使用document.hidden就能满足通常的需求。

为了支持老版本的浏览器，我们需要对document.hidden在做一些前缀处理：

function getHiddenProp(){
    var prefixes = ['webkit','moz','ms','o'];

    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';

    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document) 
            return prefixes[i] + 'Hidden';
    }

    // otherwise it's not supported
    return null;
}

这样我们可以写一个跨浏览器的函数，检查文档是否可见。

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;

    return document[prop];
}

window.addEventListener(“popstate”, function(){})

在WebApp或浏览器中，会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作

window.addEventListener("popstate", function(){
    //doSomething
}, false)

注意事项
1.每次返回都会消耗一个 history 实体，若用户选择取消离开，则需要继续 pushState 一个实体
2.pushState 只能一个实体，多个实体返回会出错。使用 window.history.state 查询是否存在添加的实体。

popstate 事件被触发是在激活状态的历史条目发生改变的时候，也就是说在监听之前应该先用 history.pushState 方法往历史栈中推一条数据，这个时候点击回退按钮才会触发 popstate 事件。

在window.addEventListner前面调用一下history.pushState就可刷新。

 window.addEventListener('hashchange', function() {
          console.log(111)
            //为当前导航页附加一个tag
            this.history.replaceState('hasHash', '', '');

        }, false);

 history.pushState(1, '', '')
 window.onpopstate = function(e) {
          console.log(e, e.state)
            if (!e.state) {
              //侦测是用户触发的后退操作, dosomething
              //这里刷新当前url
              window.location.reload();
            }
        };
    }

Onblur

监控（窗口 页面 组件）失去焦点事件

Onfocus

监控（窗口 页面 组件）得到焦点事件