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

Confirmation before closing of tab/browser

提问by gopi1410

How to ask confirmation from user before he leaves the page as in gmail?

如何在用户离开页面之前要求用户确认，就像在 gmail 中一样？

I searched for this question in various places, but all that they mention is the use of javascript window.unload& window.onbeforeunload. Also it doesn't work in chrome most of the times as it gets blocked.

我在各个地方搜索过这个问题，但他们提到的只是使用 javascript window.unload& window.onbeforeunload。此外，它在大多数情况下无法在 chrome 中工作，因为它被阻止了。

回答by gopi1410

Try this:

尝试这个：

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

Here is a working jsFiddle

这是一个有效的jsFiddle

回答by Claudia L

Try this:

尝试这个：

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

more info here MDN.

更多信息在这里MDN。

回答by Musaddiq Khan

I read comments on answer set as Okay. Most of the user are asking that the button and some links click should be allowed. Here one more line is added to the existing code that will work.

我将答案集的评论阅读为OK。大多数用户都要求应该允许按钮和一些链接点击。这里在现有代码中又添加了一行，可以正常工作。

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

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

Call unhook() onClick for button and links which you want to allow. E.g.

调用 unhook() onClick 以获得您想要允许的按钮和链接。例如

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

回答by Matee Gojra

Simply

简单地

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;

回答by Konstantin Smolyanin

The shortest solution for the year 2020(for those happy people who don't need to support IE)

在为2020年最短的解决方案（谁也不需要支持IE那些快乐的人）

Tested in Chrome, Firefox, Safari.

在 Chrome、Firefox、Safari 中测试。

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

    delete e['returnValue'];
}

window.addEventListener('beforeunload', onBeforeUnload);

Actually no one modern browser (Chrome, Firefox, Safari) displays the "return value" as a question to user. Instead they show their own confirmation text (it depends on browser). But we still need to return some (even empty) string to trigger that confirmation on Chrome.

实际上，没有一种现代浏览器（Chrome、Firefox、Safari）向用户显示“返回值”作为问题。相反，他们显示自己的确认文本（这取决于浏览器）。但是我们仍然需要返回一些（甚至是空的）字符串来触发 Chrome 上的确认。

More explanations see on MDN hereand here.

更多解释参见 MDN此处和此处。

回答by yaya

If you want to ask based on condition:

如果您想根据条件询问：

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