关闭选项卡/浏览器之前的确认

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;
  }