[Javascript] 關閉瀏覽器或分頁事件: beforeunload

日期：
瀏覽器的 beforeunload 這事件相信大家都不陌生，網路上也有很多資料了，主要用途就是希望當使用者離開瀏覽器時，能暫時阻止並詢問使用者是否真的要離開。後來因為 beforeunload 被濫用，各家瀏覽器就開始限制此事件的功能，例如就禁止客製化詢問訊息等。還記得當時要為了要讓使用者離開瀏覽器時能彈窗詢問，也是測試很久，這邊把測試的結果列出來，供大家參考。

測試瀏覽器為以下：
  • Chrome 75
  • Firefox 68
  • IE11
測試監聽beforeunload事件有兩種方式，因瀏覽器實做方式不同，所以會有不同結果：
  • window.addEventListener('beforeunload', function(event) {})
  • window.onbeforeunload = function(event) {}
要求關閉的指令是由傳入function的event或return來決定，可有三種方式：
  • event.preventDefault()
  • event.returnValue = ''
  • return ''
交叉測試3瀏覽器、2種監聽方式、3種指令後，結果如下：


若真的要用關閉瀏覽器時彈窗詢問視窗，可使用window.onbeforeunload，配合 return '' 就可以達到這需求。若要支援其他瀏覽器或手機瀏覽器，建議是使用任一種監聽方式，搭配使用上述三種方式： event.preventDefault(), event.returnValue = '' 與 return ''，會比較保險了。


以下為單html檔測試範例︰
<html>
<head>
    <title>alert block for beforeunload</title>
</head>
<body>

    <a href="http://google.com">go to google</a>

    <script>

        //有效是指單獨使用該行指令時，關閉瀏覽器時會彈出詢問視窗

        window.addEventListener('beforeunload', function(event) {
            //event.preventDefault(); //chrome無效, ff有效, ie11有效
            //event.returnValue = ''; //chrome有效, ff無效, ie11有效
            //return ''; //chrome無效, ff無效, ie11有效
        });

        window.onbeforeunload = function(event) {
            //event.preventDefault(); //chrome無效, ff有效, ie11有效
            //event.returnValue = ''; //chrome有效, ff無效, ie11有效
            //return ''; //chrome有效, ff有效, ie11有效
        };

    </script>

</body>
</html>


#Javascript, beforeunload, onbeforeunload,  chrome, firefox, ie11, event, preventDefault, returnValue, return, 關閉, 瀏覽器, 詢問, 彈窗


留言

張貼留言