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>