onunload事件不触发的探索

时间 2019-11-08

标签 onunload 事件触发探索繁體版

原文原文链接

　　若是现有一需求：浏览器页面关闭时弹出一个对话框，询问是否要退出，应该怎么作呢？html

　可用onunload事件来实现，该事件会在刷新和关闭页面时执行segmentfault

　　我用以下3种方法绑定该事件，但全部主流浏览器都没法在关闭页面时执行该事件
浏览器

<body onunload="alert('肯定离开吗？')">

<script>
      window.onunload = function() {
            alert("肯定离开吗？");
      }
</script>

<body onunload="hello()">
        <div>欢迎学习JavaScript</div>
        
        <script>
            function hello() {
                alert("肯定离开吗？");
            }
        </script>
 </body>

　　后来调试发现，onunload事件已正常执行，但onunload是在销毁页面对象后触发的，此时alert方法已经被锁定销毁，因此不能弹出提示框学习

　　 参考：https://segmentfault.com/q/1010000014717573测试

　　那是否是就没法实现该需求了呢？其实官方提供了另外一个方法 onbeforeunloadui

该方法能让咱们点击关闭页面时，在页面即将关闭以前执行相应的操做spa

　　Demo调试

<!DOCTYPE HTML>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title> 卸载事件 </title>

    </head>

    <body>
        <div>欢迎学习JavaScript</div>

        <script>
            window.onbeforeunload = function(e) {
                e = e || window.event;

                // 兼容IE8和Firefox 4以前的版本
                if(e) {
                    e.returnValue = '肯定要关闭该页面吗？';
                }

                return '肯定要关闭该页面吗？';
            };
        </script>
    </body>

</html>

　　注：① 经测试，IE，edge,safari刷新和关闭页面都会弹出相应提示；code

　　　　② 火狐，谷歌，360极速刷新能弹出，关闭页面时没法弹出，而且弹出框不是咱们自定义的内容htm

　　附：补充2个可能你会问到的问题，而这2个问题官方已经给出了答案

　　　　 问题一：为何有些浏览器没法弹出提示框

　　　　 问题二：为何有些浏览器在关闭页面时弹出的提示框内容不是咱们自定义的