如何在浏览器中制作“您确定要离开此页面”警告消息吗?

时间:2012-02-22 13:14:25

标签: c# javascript asp.net

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

我在网上研究了这个并找到了一些javascript示例。这是你能做到这一点的唯一方法吗?如果没有,最好的方法是什么?

8 个答案:

答案 0 :(得分:5)

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

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

答案 1 :(得分:1)

只有unload()事件才能在JS上运行。您无法在服务器上管理它。

答案 2 :(得分:1)

在SO上查看其他问题的答案,这与您的问题非常相似

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

答案 3 :(得分:1)

简单的解决方案

    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

答案 4 :(得分:1)

如果要以确保它几乎适用于所有浏览器的方式执行此操作,请使用JQuery库。以下描述了卸载事件。

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

这完全符合你的目的。

稍微详细说明一下,你必须下载jquery js库并在你的项目/页面中引用它,但你最终可能想要这样做。

如果要从服务器端控制它,可以在OnPreRender中动态发出jquery调用。

答案 5 :(得分:1)

您无法使用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 :(得分:0)

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

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

请注意,beforeunload canot会阻止页面卸载或将页面重定向到其他页面,原因很明显;滥用会太容易了。此外,如果您只想在卸载前运行一个函数,请尝试以下操作:

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

最后,不要忘记使用以下方法在头标记中引用jQuery:

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

以上为您提供了来自互联网的最新版本,并为您省去了下载它的麻烦,当然您可以选择这样做,但我只是想尽快让您的工作。 哦,我也为你找到了一个例子。 Click here查看在关闭之前调用函数的页面。希望这有助于萌芽。

答案 7 :(得分:0)

我能够用Andrei G的答案来解决这个问题。我会添加它以使其在Chrome中工作,将其添加到他的再见函数的末尾:

返回&#34;&#34;;