浏览器 - 监听浏览器刷新及关闭

一、相关的方法

浏览器的刷新和关闭都触发 onbeforeunload 和 onunload

onbeforeunload：在页面刷新和关闭的时候触发事件，表示正要去服务器读取新的页面时调用，此时还没开始读取。

onunload：则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。

onload：当资源已加载时被触发。

onbrforeunload和onunload都会在刷新和关闭页面是触发，但是onbeforeunload在onunload之前执行，并且它还可以阻止onunload的执行。
那么在页面刷新时执行顺序就是onbeforeunload、onunload、onload。

二、兼容说明

不同浏览器对事件的处理

IE浏览器 页面跳转、刷新页面能执行，但关闭浏览器不能执行；
firefox 页面跳转能执行，但刷新页面、关闭浏览器不能执行；
Safari 刷新页面、页面跳转，关闭浏览器都会执行；
Opera、Chrome任何情况都不执行。

onbeforeunload和onunload在谷歌和火狐中，必须先按F12打开开发者模式，刷新或关闭网页，才会用提示框 。而且不能连续刷新，如刷新第一次有提示框接着刷新第二次，就变成直接刷新没有提示框。但是如果2次刷新时间间隔在30秒左右，则第二次刷新会有提示框。如果不按F12打开开发者模式，谷歌和火狐在onbeforeunload事件触发时都不会有提示框，会直接刷新或关闭页面。

onbeforeunload中的return是自定义提示信息，并且如果没有return在谷歌中是不会有反应，ie则不会出现这个情况。
onunload事件也只有在ie中才起作用，在其他浏览器中也没有反应。

有时候我们会发现，在Chrome或Firefox中连续刷新不起作用，或者点击关闭按钮没有弹窗提醒。但是如果在事件方法体内执行console控制台又有输出。
其实是因为要触发浏览器自带的关闭弹窗，用户必须跟网页有过交互。简单的来说就是点击过网页。
连续刷新时，因为你没有点击过网页内部，所以无法触发。
刚一打开页面就点击关闭时，同理也无法触发。另外，Chrome及Firefox无法修改提示文字。

例子

componentWillMount () {
    // 拦截判断是否离开当前页面
    window.addEventListener('beforeunload', this.beforeunload);
  }
  componentWillUnmount () {
    // 销毁拦截判断是否离开当前页面
    window.removeEventListener('beforeunload', this.beforeunload);
  }
  beforeunload (e) {
    let confirmationMessage = '你确定离开此页面吗?';
    (e || window.event).returnValue = confirmationMessage;
    return confirmationMessage;
  }

参考链接：

Window: beforeunload event