页面 beforeunload unload pagehide

  • 当浏览器窗口关闭或者刷新时,会触发beforeunload事件。当前页面不会直接关闭,可以点击确定按钮关闭或刷新,也可以取消关闭或刷新。
  • 能够触发请求(谷歌)
  • 如果处理函数为Event对象的returnValue属性赋值非空字符串,浏览器会弹出一个对话框,来询问用户是否确定要离开当前页面(如下示例)。没有赋值时,该事件不做任何响应。
    • 有些浏览器会将返回的字符串展示在弹框里,但有些其他浏览器只展示它们自定义的信息。
// 多内核代码
window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "o/";

  (e || window.event).returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;                                // Gecko and WebKit
});
  • 在此事件处理函数中,对于window.alert(), window.confirm(), 和 window.prompt() 的调用会被忽略。
  • 许多手机浏览器会忽略该事件处理的返回值(亦即,它们不会要求用户确认,而是直接执行操作)

unload

  • 当文档或一个子资源正在被卸载时, 触发 unload事件。
  • 在下面两个事件后被触发:
    • beforeunload (可取消默认行为的事件)
    • pagehide
  • 文档会处于一个特定状态:
    • 所有资源仍存在 (图片, iframe 等.)
    • 对于终端用户所有资源均不可见
    • 界面交互无效 (window.open, alert, confirm 等.)
    • 错误不会停止卸载文档的过程
  • 遵循文档树:父iframe会在子iframe卸载前卸载
  • 事件e包含以下属性
    • target:事件目标(DOM树中最顶层的目标),谷歌中是document节点
    • type:"unload"
    • bubbles:false // 是否正常冒泡
    • cancelable:false // 是否可以取消
  • 关闭浏览器时能触发事件。但是请求无法发起,后端无法拦截到(不是很确定),能够console.log(谷歌)
  • 刷新不会触发(谷歌)
  • 同域跳转页面会被触发,跨域不会(谷歌)

pagehide

  • 当浏览器在会话历史记录中的不同页面切换过程中隐藏当前页面时,将向窗口发送pagehide事件。例如,当用户单击浏览器的“后退”按钮时,当前页面在显示上一页之前会收到一个pagehide事件。
  • 谷歌支持该事件