浏览器窗口意外关闭时发出警报

时间:2009-08-07 12:50:10

标签: javascript jquery

我有一个聊天应用程序,我希望每当用户意外或手动关闭浏览器时,他都应该收到警报,以便可以执行各种清理操作。我有更多的东西,我希望在事件之前使用,但我希望它用于特定的网页,因为所有其他网页也在加载前调用。请帮忙

4 个答案:

答案 0 :(得分:23)

我们应该阻止或提示用户在执行这些操作时他会丢失数据。

  1. 点击后退浏览器按钮。
  2. 点击刷新浏览器按钮。
  3. 点击浏览器的关闭按钮。
  4. 点击前进浏览器按钮。
  5. 键盘描边 - Alt + F4 (关闭)
  6. 键盘描边 - F5 (刷新)
  7. 键盘描边 - CTRL + F5 (刷新)
  8. 键盘描边 - Shift + F5 (刷新)
  9. 更改网址
  10. 或任何导致回发而非您的特定提交按钮的内容。
  11. 为了解释我使用了两个文本框,一个带有id TestButton的Asp.net提交按钮。 我采取的其他回发控制是 另一个asp.net按钮,一个带有autopostback属性为true的复选框,一个带有autopostback属性为true的下拉列表。 现在我已经使用了所有这些回发控件,以便向您显示当用户对这些控件执行操作时,我们还需要向用户显示有关数据丢失的promt。 在提交按钮上,我们不会显示提示,因为我们必须使用该控件操作提交数据。这是示例代码。我已经在控件更改时设置了window.onbeforeunload方法。

    <html >
    <head id="Head1">
        <title></title>
    
        <script type="text/javascript"
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
        <script type="text/javascript">
            $(function()
            {
                // Prevent accidental navigation away
                $(':input').bind(
                    'change', function() { setConfirmUnload(true); });
                $('.noprompt-required').click(
                    function() { setConfirmUnload(false); });
    
                function setConfirmUnload(on)
                {
                    window.onbeforeunload = on ? unloadMessage : null;
                }
                function unloadMessage()
                {
                    return ('You have entered new data on this page. ' +
                            'If you navigate away from this page without ' +
                            'first saving your data, the changes will be lost.');
                }
    
                window.onerror = UnspecifiedErrorHandler;
                function UnspecifiedErrorHandler()
                {
                    return true;
                }
    
            }); 
    
        </script>
    
    </head>
    <body>
        <form id="form1" name="myForm" runat="server">
        <div>
            First Name :<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
            <br />
            Last Name :<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
            <br />
            IsMarried :<asp:CheckBox ID="CheckBox1" runat="server" /><br />
            <br />
            <asp:Button runat="server" ID="TestButton" Text="Submit" CssClass="noprompt-required" /><br />
            <br />
            <br />
            <br />
            <br />
            <asp:Button runat="server" ID="AnotherPostbackButton" Text="AnotherPostbackButton"
                 /><br />
            <br />
            <asp:CheckBox runat="server" ID="CheckboxWhichCausePostback" Text="CheckboxWhichCausePostback"
                AutoPostBack="true" /><br />
            <br />
            DropdownWhichCausePostback<asp:DropDownList runat="server" ID="DropdownWhichCausePostback"
                AutoPostBack="true">
                <asp:ListItem Text="Text1"></asp:ListItem>
                <asp:ListItem Text="Text2"></asp:ListItem>
            </asp:DropDownList>
            <br />
            <br />
        </div>
        </form>
    </body>
    

    以上我用过:

    $('.noprompt-required').click(function() { setConfirmUnload(false); });
    

    我在这一行中所做的是调用setConfirmUnload方法并将false作为参数传递,将window.onbeforeunload设置为null。 那么这意味着在任何你想要不要提示用户的控件上,给那个控件提供类.noprompt-required并保留其他原样。

答案 1 :(得分:22)

这不是一个真正的JQuery,我使用这个函数:

function setConfirmUnload(on) {
    window.onbeforeunload = (on) ? unloadMessage : null;
}

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

然后,您可以随时致电

setConfirmUnload(true)启用确认,如果您想让它们在没有警告的情况下关闭屏幕(如果您有关闭按钮),则启用确认。

答案 2 :(得分:7)

您可以尝试卸载事件:

$(window).unload( function () { alert("Bye now!"); } );

http://docs.jquery.com/Events/unload

我猜这次清理只在客户端上进行。了解这些“清理”的性质会很有趣。

答案 3 :(得分:-1)

您可以尝试使用ajax

$(window).unload( function () { alert("AJAX function to do required job"); } );