JS onbeforeunload与onunload区别：触发时机、浏览器兼容及缓存实现方案

需求背景与问题描述

在最近的项目开发中，有一个需求是当用户离开当前页面时，需要缓存页面中的部分数据。然而，这个缓存操作不应在用户刷新页面时触发，仅希望在用户真正离开页面（如关闭标签或跳转）时才执行。

经过搜索发现，onbeforeunload与onunload这两个事件似乎能满足需求，但实际测试中发现onbeforeunload在用户刷新页面时也会执行，这导致逻辑处理变得复杂。经过一段时间的调试，这里对这两个事件进行简要总结。

onbeforeunload与onunload事件详解

onbeforeunload事件详解

onbeforeunload定义和用法

onbeforeunload事件在用户即将离开当前页面（无论是刷新还是关闭浏览器）时触发。

该事件通常用于弹出一个确认对话框，询问用户是继续浏览当前页面还是离开。

不同浏览器显示的默认提示信息有所不同，标准提示通常类似“确定要离开此页吗？”。需要注意的是，这个默认提示信息无法通过代码直接删除。

不过，开发者可以自定义一些提示消息，这些自定义消息会与浏览器的标准信息一起显示在对话框中。

注意：如果未在<body>元素上指定onbeforeunload事件，则必须在window对象上添加该事件监听器，并通过设置returnValue属性来创建自定义提示信息（参考下方的语法示例）。

注意：在Firefox浏览器中，出于安全考虑，只显示默认的提醒信息，不支持显示自定义的提示信息。

使用方法如下：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body onbeforeunload="return test()">
   
</body>
<script type="text/javascript">
  function test(){
    return "你确定要离开吗";
  }
</script>
</html>

或者通过JavaScript绑定：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
   
</body>
<script type="text/javascript">
window.onbeforeunload=function(){
  return "你确定要离开吗";
}
 
</script>
</html>

当事件触发时，会弹出一个包含“确定”和“取消”按钮的对话框。点击“确定”则离开页面，点击“取消”则停留在当前页。当然，开发者可以自定义提示文本内容。

避免刷新触发与提示框的实现方案

那么，如果我只希望在用户离开页面时执行缓存函数，而在刷新页面时不执行且也不弹出提示框，该如何实现呢？


window.onbeforeunload = function() {
 
    var n = window.event.screenX - window.screenLeft;
 
    var b = n > document.documentElement.scrollWidth - 20;
 
    if (!(b && window.event.clientY < 0 || window.event.altKey)) {
      //window.event.returnValue = "真的要刷新页面么？";
      
      //这里放置我想执行缓存的代码
      cacheFunction();
      
    }
 }

此时，可以在用户离开页面时执行缓存代码，同时避免弹出提示框。值得注意的是，为了确保数据保存成功，需要将Ajax请求设置为同步模式，即将ajax配置中的async参数改为false。

onbeforeunload的浏览器兼容性

浏览器兼容情况

IE、Chrome、Safari 完美支持

Firefox 不支持文字提醒信息

Opera 不支持

IE6,IE7 使用 onbeforeunload 遇到的bug

onunload事件详解

2、onunload定义和用法

onunload事件在用户退出页面时发生。

其使用方法与onbeforeunload类似。


window.onunload = function(){
  return "你确定要离开吗"
}

onunload的浏览器兼容性

浏览器兼容情况

在IE6、IE7、IE8中，刷新页面、关闭浏览器之后、页面跳转之后都会执行该事件；

在IE9中，刷新页面会执行，但页面跳转和关闭浏览器时不执行；

在Firefox（包括Firefox3.6）中，关闭标签页、页面跳转之后、刷新页面之后能执行，但关闭整个浏览器时不执行；

在Safari中，刷新页面、页面跳转之后会执行，但关闭浏览器时不执行；

在Opera、Chrome中，任何情况下都不执行该事件。

onbeforeunload与onunload的区别总结

总结

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

页面加载时只执行onload。页面关闭时先执行onbeforeunload，最后执行onunload。页面刷新时先执行onbeforeunload，然后执行onunload，最后执行onload。

JavaScript中onbeforeunload与onunload事件的区别及浏览器兼容性详解