小编典典

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

javascript

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


阅读 326

收藏
2020-05-01

共1个答案

小编典典

我们应防止或提示用户执行这些操作将丢失其数据。

  1. 单击后退浏览器按钮。
  2. 单击刷新浏览器按钮。
  3. 点击浏览器的关闭按钮。
  4. 单击前进浏览器按钮。
  5. 键盘击键- Alt+ F4 (关闭)
  6. 键盘击键- F5(刷新)
  7. 键盘击键- CTRL+ F5(刷新)
  8. 键盘击键- Shift+ F5(刷新)
  9. 网址变更
  10. 或导致回发的任何内容,而不是您特定的提交按钮。

为了说明我已经使用了两个文本框,一个ID为TestButton的Asp.net提交按钮。我采取的其他回发控件是另一个asp.net按钮,一个具有autopostback属性为true的复选框,一个具有autopostback属性为true的dropdownlist。现在,我已经使用了所有这些回发控件,以便向您展示,当用户在这些控件上执行操作时,我们还需要向用户显示有关数据丢失的提示。在提交按钮上,我们将不会显示提示,因为我们必须通过该控件操作来提交数据。这是示例代码。我在控件更改上设置了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); });

我在这一行中所做的是我正在调用setConfirmUnloadmethod并将false作为参数传递,这将设置window.onbeforeunload为null。因此,这意味着在不希望提示该用户的任何控件上,为该控件提供类,.noprompt- required并保留其他类。

2020-05-01