浏览器处理unload和onbeforeunload事件

最新推荐文章于 2024-04-09 11:57:18 发布

胖鹅68

最新推荐文章于 2024-04-09 11:57:18 发布

阅读量5.7k

点赞数

分类专栏： Html5、JavaScript、ES6

本文链接：https://blog.csdn.net/hbiao68/article/details/104752500

版权

Html5、JavaScript、ES6 专栏收录该内容

82 篇文章 3 订阅

订阅专栏

文章参考

兼容说明

不同浏览器对事件的处理

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

大体一句话描述：IE, Firefox, 和 Safari 支持 onunload 事件, 但是 Chrome 或者 Opera 不支持该事件。

chrome响应

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

案例说明

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>onbeforeunload测试</title>
    <script>
      window.onbeforeunload = function() {
        alert("欢迎下次再来！onbeforeunload");
        return "onbeforeunload is work";
      };
      function checkLeave() {
        alert("欢迎下次再来！onunload");
        return "huangbiao";
      }
    </script>
  </head>
  <body onunload="checkLeave()">
    学习onbeforeunload 和 onunload 事件
  </body>
</html>