如果在ASP.NET中关闭窗口,但不在PostBack上关闭,则显示消息

Display message if close window in ASP.NET but not on PostBack

本文关键字:PostBack 消息 显示 窗口 ASP NET 如果      更新时间:2023-09-26

只有当用户关闭我的ASP.NET Web窗体页面或离开该页面时,我才想向用户显示消息。如果他们单击任何按钮、LinkButton、AutoPostBack元素或任何其他将回发的元素,则我不想显示消息。

到目前为止,我有以下代码:

<script type="text/javascript">
var postback = false;
addToPostBack = function(func) {
    var old__doPostBack = __doPostBack;
    if (typeof __doPostBack != "function") {
        __doPostBack = func;
    } else {
        __doPostBack = function(t, a) {
            if (func(t, a)) old__doPostBack(t, a);
        }
    }
};
$(document).ready(function() {
    addToPostBack(function(t,a) {
        postback = true;
    });
});
$(window).bind("beforeunload", function() {
    if (!postback) {
        return "message";
    }
});
</script>

这部分起作用,但似乎阻止了AutoPostBack事件的启动,并且仍然显示LinkButtons等的消息。

我该怎么做?

这将获取调用__doPostBack的时间戳,然后执行默认行为。

只有当onbeforeunload事件的时间戳与最新的__doPostBack时间戳之间的差异大于allowedWaitTime时,它才会显示您的自定义消息。

用法:将其包含在页面中的任何位置。

更新:

这将同时处理WebForm_DoPostBackWithOptions和

(function ($) {
    if (typeof $ !== 'function') {
        throw new Error('jQuery required');
    }
    /* The time in milliseconds to allow between a __doPostBack call and 
       showing the onbeforeunload message. */
    var allowedWaitTime = 100,
        timeStamp = new Date().getTime(),
        // Each function to override
        baseFuncs = {
            __doPostBack: this.__doPostBack,
            WebForm_DoPostBackWithOptions: this.WebForm_DoPostBackWithOptions
        };
    // Set timeStamp when each baseFunc is called
    for (var baseFunc in baseFuncs) {
        (function (func) {
            this[func] = function () {
                var baseFunc = baseFuncs[func];
                timeStamp = new Date().getTime();
                if (typeof baseFunc === 'function') {
                    baseFunc.apply(arguments.callee, arguments);
                }
            }
        })(baseFunc);
    }
    /* Form submit buttons don't call __doPostBack so we'll set timeStamp 
       manually on click. */
    $('input[type="submit"]').click(function () {
        timeStamp = new Date().getTime();
    });
    $(this).on('beforeunload', function (e) {
        // Only return string if allowedWaitTime has elapsed
        if (e.timeStamp - timeStamp > allowedWaitTime) {
            return 'message';
        }
    });
}).call(window, jQuery);

试试这个:-

jQuery(function ($) {
    $(document).on("click", function () {
        window.onbeforeunload = null;
    });
});
window.onbeforeunload = function (event) {
    return "message";
}

您可以通过使用以下代码来实现这一点:

<script type="text/javascript">
        var isChanged = false;
        $(document).ready(function () {
            $('input').click(function () {
                isChanged = true;
            });
            $('select').click(function () {
                isChanged = true; 
            });
        });
        $(window).bind("beforeunload", function () {
            if (isChanged) {
                return '>>>>>Before You Go<<<<<<<< 'n Your custom message go here';                
                }           
        })
    </script>

当用户点击表单中的任何input(按钮)或select(下拉列表)时,这就起作用。

此处显示完整代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        var isChanged = false;
        $(document).ready(function () {
            $('input').click(function () {
                isChanged = true;                
            });
            $('select').click(function () {
                isChanged = true;                
            });
        });
        $(window).bind("beforeunload", function () {
            if (isChanged) {
                return '>>>>>Before You Go<<<<<<<< 'n Your custom message go here';                
                }           
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <asp:TextBox runat="server" ID="txtbox" />      
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button Text="button" runat="server" ID="btn" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:DropDownList runat="server" ID="ddl">
                        <asp:ListItem Text="One" />
                        <asp:ListItem Text="Two" />
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:CheckBox Text="Check" runat="server" ID="chk" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:RadioButtonList runat="server" ID="radio">
                        <asp:ListItem Text="One" />
                        <asp:ListItem Text="Two" />
                    </asp:RadioButtonList>
                </td>
            </tr>

        </table>
    </div>
    </form>
</body>
</html>

在您的链接按钮和按钮上设置onclick="$(window).unbind("beforeunload");return true;"

您的autopostback元素应该设置onchange或导致autopostback设置为onchange="$(window).unbind("beforeunload");return true;" 的原因

请确保在回发后再次绑定beforeunload!