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


75

如何在用户离开Gmail之前要求用户确认?

我在各个地方搜索了这个问题,但他们提到的只是使用javascript window.unloadwindow.onbeforeunload。而且,由于它被阻塞,大多数情况下在chrome中都不起作用。


我尝试了window.unload和window.onbeforeunload,但是它们没有按要求工作。

3
@CiroSantilli:不,不是。另一个问题是关于onbeforeunload正确使用的问题
Bergi 2014年

Answers:


120

尝试这个:

<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


2
也不会被任何浏览器禁用,因为它源于用户点击
gopi1410 2012年

非常感谢!这就是我所需要的。顺便说一句,爱小提琴演示,正是我想要的。

您好,您的代码正在运行,但是无法区分用户单击浏览器的关闭按钮还是单击导航按钮转到其他页面。
user3217843 '16

OP并没有特别要求。如果需要,我想您需要检查event.target一下click事件是否起源于您的页面容器。
gopi1410

8
我试过了,它只在首先单击其他东西时才起作用。右键单击一个链接。然后,如果我单击浏览器关闭按钮,则会在按预期关闭之前提示。否则,例如,如果我直接进入页面并直接单击“关闭”按钮,它将不起作用并且页面关闭。onbeforeunload函数中的代码会命中每个,但在最后一种情况下显然无效。
nickornotto

10

尝试这个:

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

这里更多信息MDN


6

我读了关于设置为“好的”的答案的评论。大多数用户要求按钮和某些链接单击应被允许。在这里,将在现有代码中再增加一行。

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

1
您可以直接做onclick="hook = false;"
未定义的

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 。


3

只是

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;

0

如果要根据条件询问:

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?';
};
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.