關閉瀏覽器或者重新整理瀏覽器彈窗提示，可以取消或者確認。

張旭超發表於2021-11-15
瀏覽器

新增如下js程式碼即可

<html>
    <head>
        <style>
        </style>
    </head>
    <body>
        重新整理或者關閉視窗觸發事件
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script lang="typescript/js">
            /*
                這樣關閉和重新整理視窗的時候都會提示
                遇到問題：
                    1、如果開啟介面沒有任何操作，包括單機介面，是不會出發一下事件的
                    2、修改提示文字好像沒有起作用。
            */
            window.isCloseHint = true;
            //初始化關閉
            window.addEventListener("beforeunload", function(e) {
                if (window.isCloseHint) {
                    var confirmationMessage = "要記得儲存！你確定要離開我嗎？";
                    (e || window.event).returnValue = confirmationMessage; // 相容 Gecko + IE
                    return confirmationMessage; // 相容 Gecko + Webkit, Safari, Chrome
                }
            });
        </script>
    </body>
</html>

vue中使用

  mounted () {
    window.isCloseHint = true
    // 初始化關閉
    window.addEventListener('beforeunload', function (e) {
      if (window.isCloseHint) {
        let confirmationMessage = '您確定要關閉視窗嗎，如果關閉視窗下載會停止！';
        (e || window.event).returnValue = confirmationMessage
        return confirmationMessage
      }
    })
  },

相關文章