5

只有当用户关闭我的 ASP.NET Web 表单页面或导航离开它时，我才想向用户显示一条消息。如果他们单击任何 Button、LinkBut​​ton、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 事件的触发，并且仍然显示 LinkBut​​tons 等的消息。

我怎样才能做到这一点？

4

4 回答 4

3

这将获取调用 __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);
于 2013-08-23T11:17:29.360 回答
0

试试这个： -

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

});

window.onbeforeunload = function (event) {
    return "message";
}
于 2013-08-23T09:29:51.150 回答
0

您可以使用以下代码实现此目的：

<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>
于 2013-08-23T10:42:28.193 回答
0

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

您的自动回发元素应设置onchange或导致自动回发设置为onchange="$(window).unbind("beforeunload");return true;"

回发后一定要再次绑定 beforeunload ！

于 2013-08-25T10:42:39.313 回答