關閉選項卡/瀏覽器之前的確認

Question

如何在用戶離開頁面之前要求用戶確認，就像在 gmail 中一樣？

我在各個地方搜索了這個問題，但他們提到的只是使用 javascript window.unload & window.onbeforeunload 。 此外，它在大多數情況下都無法在 chrome 中工作，因為它被阻止了。

Answer 1

試試這個：

<script>
window.onbeforeunload = function (e) {
    e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Sure?';
    }

    // For Safari
    return 'Sure?';
};
</script>

這是一個有效的jsFiddle

Answer 2

試試這個：

<script>
    window.onbeforeunload = function(e) {
       return 'Dialog text here.';
    };
</script>

更多信息在這里MDN 。

Answer 3

我將答案集的評論閱讀為OK 。 大多數用戶都要求應該允許按鈕和一些鏈接點擊。 這里在現有代碼中又添加了一行，可以正常工作。

<script type="text/javascript">
  var hook = true;
  window.onbeforeunload = function() {
    if (hook) {

      return "Did you save your stuff?"
    }
  }
  function unhook() {
    hook=false;
  }

調用 unhook() onClick 以獲得您想要允許的按鈕和鏈接。 例如

<a href="#" onClick="unhook()">This link will allow navigation</a>

Answer 4

2020年最短的解決方案（給那些不需要支持IE的快樂的人）

在 Chrome、Firefox、Safari 中測試。

function onBeforeUnload(e) {
    if (thereAreUnsavedChanges()) {
        e.preventDefault();
        e.returnValue = '';
        return;
    }

    delete e['returnValue'];
}

window.addEventListener('beforeunload', onBeforeUnload);

實際上，沒有一種現代瀏覽器（Chrome、Firefox、Safari）向用戶顯示“返回值”作為問題。 相反，他們顯示自己的確認文本（這取決於瀏覽器）。 但是我們仍然需要返回一些（甚至是空的）字符串來觸發 Chrome 上的確認。

更多解釋參見 MDN 此處和此處。

Answer 5

簡單地

function goodbye(e) {
        if(!e) e = window.event;
        //e.cancelBubble is supported by IE - this will kill the bubbling process.
        e.cancelBubble = true;
        e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

        //e.stopPropagation works in Firefox.
        if (e.stopPropagation) {
            e.stopPropagation();
            e.preventDefault();
        }
    }
window.onbeforeunload=goodbye;

Answer 6

如果您想根據條件詢問：

var ask = true
window.onbeforeunload = function (e) {
    if(!ask) return null
    e = e || window.event;
    //old browsers
    if (e) {e.returnValue = 'Sure?';}
    //safari, chrome(chrome ignores text)
    return 'Sure?';
};

Answer 7

1. 假設我想關閉一個窗口，如果沒有選擇任何東西
2. 我想用選定的東西關閉窗口，但不提示我。
3. 我想關閉一個窗口，但選擇了一些東西提示我。

對於這三個條件，我在以下代碼中進行了大量搜索，根據我的需要進行了更改，希望對其他人有所幫助。 如果我想彈出提示“true”，ask 是一個關鍵，否則會提示您關閉窗口。 假設我想打印我的文檔並重定向我的頁面，詢問將是假的，並且不會有提示。 假設您的頁面有數據，然后檢查條件是我的情況，如果小計為零，則沒有提示，否則會提示我您的頁面中有內容。

<pre>
    var ask = true;
    window.onbeforeunload = function(e) {
       if (!ask) return null
       var subtotal = $('#lblgtwithsgst').text();
         if (subtotal != '0') {
          e = e || window.event;
          //old browsers
            if (e) {
             e.returnValue = 'Sure?';
            }
            //safari, chrome(chrome ignores text)
            return 'Sure?';
         }  
      }
      $('#btnPrint').click(function(){
        ask = false;
        ///print your doc no prompt if ask is false;
      )};

Answer 8

// use jquery version older than 1.6    
    var preventUnloadPrompt;
    var messageBeforeUnload = "my message here - Are you sure you want to leave this page?";
    $('a').live('click', function() { preventUnloadPrompt = true; });
    $('form').live('submit', function() { preventUnloadPrompt = true; });


    $(window).bind("beforeunload", function(e) { 
        
        var rval;
        if(preventUnloadPrompt) {
            return;

        } else {
            

            return messageBeforeUnload;
        }

        return rval;
    })

Answer 9

對於 Angular，更改組件表單名稱並粘貼到需要顯示警報的組件中。

  @HostListener('window:beforeunload', ['$event'])
  beforeunloadHandler(event) {
    return !this.form.dirty;
  }