JavaScript 页面刷新与关闭事件：onbeforeunload 与 onunload 详解及浏览器兼容性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onbeforeunload="return myFunction()">
<p>该实例演示了如何向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.qqtimezone.top">博客地址</a>  
<script>
function myFunction() {
 return "自定义内容";
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>该实例演示了如何使用 HTML DOM 向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.runoob.com">点击调整到菜鸟教程</a>
<script>
window.onbeforeunload = function(event) {
 event.returnValue = "我在这写点东西...";
};
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>该实例演示了如何使用 addEventListener() 方法向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.qqtimezone.top">跳转地址</a>
<script>
window.addEventListener("beforeunload", function(event) {
 event.returnValue = "我在这写点东西...";
});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript">
  function fun() {
   // dosomethings
  }
 </script>
</head>
<body onunload="fun()">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript">
 window.onunload = function() {
  // dosomethings
 };
 </script>
</head>
<body>
</body>
</html>