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個問題官方已經給出了答案

     問題一:為什么有些瀏覽器無法彈出提示框

    

        問題二:為什么有些瀏覽器在關閉頁面時彈出的提示框內容不是我們自定義的

    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM