如何在浏览器中显示“您确定要离开此页面”警告消息？答案

【问题标题】：How to make the 'Are you sure you want to navigate away from this page' warning message in browser?如何在浏览器中显示“您确定要离开此页面”警告消息？
【发布时间】：2012-03-12 19:45:34
【问题描述】：

我有一个包含文本框和提交按钮的网页。当用户编辑文本框中的文本并单击另一个链接（不是提交按钮）时，我如何显示“您确定要离开此页面”弹出消息？

我在网上对此进行了研究，并找到了一些 javascript 示例。这是你能做到这一点的唯一方法吗？如果没有，最好的方法是什么？

【问题讨论】：

标签： c# javascript asp.net

【解决方案1】：

这是实现同一目标的多种方法之一

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;

从这里得到它open js

【讨论】：

您的代码也会在关闭浏览器、链接、前后导航链接、刷新页面时触发，因此不适合使用 onbeforeunload

【解决方案2】：

只有 unload() 事件对 JS 有效。你不能在服务器上管理它。

【讨论】：

【解决方案3】：

查看关于 SO 的其他问题的答案，它与您的问题非常相似

How to show the "Are you sure you want to navigate away from this page?" when changes committed?

【讨论】：

【解决方案4】：

简单的解决方案

    window.onbeforeunload = confirmExit;

    function confirmExit() {
        return "Are you sure you want to leave this page?";
    }

4guysFromRolla.com - Prompting a user to Save when Leaving a Page

【讨论】：

您的代码也会在关闭浏览器、链接、前后导航链接、刷新页面时触发，因此不适合使用 onbeforeunload
@KunalVashist 是的，你是对的，它就是为此而生的。它通常对数据输入页面很有用。我提供的链接的向下页面是一个代码，用于检查仅在进行更改时触发！
但是刷新页面可能会导致问题，在这种情况下我不会离开页面..
@KunalVashist 当然，您在刷新时要离开，这意味着在您要保存某些内容时请求页面的新版本，在这种情况下，如果您尝试执行任何其他操作，它都会提示输入表单之外的操作。我真的很好奇 KunalVashist 是否有其他机制来避免这种情况，以防我没有更改表单并想刷新我的页面。
是的，cookie可以用来检测页面的刷新，你可以在网站第一次被点击的时候这样建一个带有时间戳的cookie，在页面刷新时比较这个时间戳.

【解决方案5】：

您不能使用 onbeforeunload 窗口方法，因为它会被多种方式触发，例如来回浏览器导航链接、刷新页面、关闭页面、单击链接。

我觉得你必须绑定要显示导航离开消息的链接标签，然后使用该功能显示状态消息

 window.addEvent('domready',function(){

         $$('a').addEvent('click', function(e) {
        //leaving(); function u wrote for displaying message

    });

});


function leaving(e) {
    if(!e)
      e = window.event;
//  return code for the displaying message
}

【讨论】：

【解决方案6】：

如果您想以一种保证它可以在几乎所有浏览器上运行的方式执行此操作，请使用 JQuery 库。下面介绍卸载事件。

http://www.w3schools.com/jquery/event_unload.asp

正是为了像你这样的目的。

详细说明一下，您必须下载 jquery js 库并在您的项目/页面中引用它，但您可能最终还是希望这样做。

如果您想从服务器端进行控制，您可以在 OnPreRender 中动态发出 jquery 调用。

【讨论】：

这将不允许您阻止导航，但是，这将是重点。如果您向用户显示一个确认框，询问他们是否要取消导航以便他们可以保存更改，那么页面无论如何都会离开，并且更改将会丢失。

【解决方案7】：

查看 Jquery 的 .beforeunload 属性。这是一个例子：

$(window).bind('beforeunload', function(){ return 'Click OK to exit'; });

请注意，由于显而易见的原因， beforeunload 不能阻止页面卸载或重定向到另一个页面；太容易被滥用了。此外，如果您只想在卸载前运行一个函数，请尝试以下操作：

$(window).unload(function(){ alert('Bye.'); });

最后，别忘了在你的 head 标签中引用 jQuery：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

以上内容为您从 Internet 获取最新版本，并为您省去下载的麻烦，当然您可以选择这样做，但我只是想让您的东西尽快工作。哦，我也为你找到了一个例子。 Click here 查看在关闭之前调用函数的页面。希望这对萌芽有所帮助。

【讨论】：

【解决方案8】：

我能够让它与 Andrei G 的答案一起使用。我会添加它以使其在 Chrome 中工作，将其添加到他的再见功能的末尾：

返回 "";

【讨论】：