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

IT技术 javascript html
2021-01-17 02:59:38

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

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

6个回答

试试这个:

<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

这也不会被任何浏览器禁用,因为它源于用户点击
2021-03-18 02:59:38
我试过了,它只有在先点击其他东西时才有效,例如。已右键单击链接。然后,如果我单击浏览器关闭按钮,它会在按预期关闭之前提示。否则,例如,如果我直接转到页面并立即单击关闭按钮,则它不起作用并且页面关闭。onbeforeunload 函数中的代码命中了每一个,但在最后一种情况下显然没有效果。
2021-03-21 02:59:38
此代码用于在过去工作(发布于 2012 年),但由于安全问题,现在在大多数浏览器中都无法使用。
2021-03-21 02:59:38
非常感谢!这就是我需要的。顺便说一句,喜欢小提琴演示,正是我想要的。
2021-04-06 02:59:38
您好..您的代码正在运行,但无法区分用户是单击浏览器的关闭按钮还是单击导航按钮转到其他页面。
2021-04-09 02:59:38

试试这个:

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

更多信息在这里MDN

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

<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>
你可以直接做 onclick="hook = false;"
2021-04-03 02:59:38

为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此处此处

ios 不再支持 beforeunload。任何其他解决方案?
2021-03-30 02:59:38
这在 2021 年有效吗?我试过但没有工作。
2021-04-01 02:59:38

简单地

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;
我正在尝试使用 pagehide 事件,但它不可取消,我也希望能够取消页面重新加载,就像我们进入 beforeunload 事件一样
2021-03-20 02:59:38
@KalleshwarKalshetty在 IOS 上使用window.unloaddocument.pagehide代替 onbeforeunload
2021-03-22 02:59:38
IOS 不再支持 beforeunload。如果你有任何其他解决方案,你能帮我吗?
2021-04-06 02:59:38