关闭标签/浏览器之前的确认

Question

如何在用户离开页面之前询问用户确认？

我在各个地方搜索了这个问题,但他们提到的只是使用了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

简单地

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 5

在为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此处和此处。