zoukankan      html  css  js  c++  java
  • onunload事件不触发的探索

       如果现有一需求:浏览器页面关闭时弹出一个对话框,询问是否要退出,应该怎么做呢?

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

      

      我用如下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

       那是不是就无法实现该需求了呢?其实官方提供了另一个方法 onbeforeunload

           该方法能让我们点击关闭页面时,在页面即将关闭之前执行相应的操作

      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刷新和关闭页面都会弹出相应提示;

        ② 火狐,谷歌,360极速刷新能弹出,关闭页面时无法弹出,并且弹出框不是我们自定义的内容

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

         问题一:为什么有些浏览器无法弹出提示框

        

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

        

  • 相关阅读:
    122. Best Time to Buy and Sell Stock II
    121. Best Time to Buy and Sell Stock
    72. Edit Distance
    583. Delete Operation for Two Strings
    582. Kill Process
    indexDB基本用法
    浏览器的渲染原理
    js实现txt/excel文件下载
    git 常用命令
    nginx进入 配置目录时
  • 原文地址:https://www.cnblogs.com/tu-0718/p/11765027.html
Copyright © 2011-2022 走看看