javascript - 从 Javascript 隐藏代码中的 Fire 事件

Question

如果用户试图离开页面，我有以下 javascript 提示用户。将出现一个对话框，其中包含“离开此页面”和“留在此页面”两个按钮。我想引起一个将触发 C# 事件的回发。

我希望在按下“离开此页面”按钮时发生此回发。

我该怎么做？对不起，我对 Javascript 还很陌生。

<script type="text/javascript" language="JavaScript">
var needToConfirm = true;

window.onbeforeunload = confirmExit;
function confirmExit() {
    if (needToConfirm)
        return "You have attempted to leave this page. This will CANCEL your current order selection.";
}

Answer 1

这里的主要挑战是在用户真正离开页面之前执行 JavaScript 函数，问题是处理 onbeforeunload 事件，你无法对用户的选择使用react，因为为了这个事件要在多浏览器 场景中工作，您必须返回一个用作消息的字符串，每个浏览器都会创建一个自定义对话框，向用户显示。我还没有找到更好的方法来做你需要的。基本上，您无法覆盖浏览器中的默认行为，也无法返回 bool 值来指示是否应卸载页面。

更多信息:

• How can I override the OnBeforeUnload dialog and replace it with my own?

• jQuery UI Dialog OnBeforeUnload

From MSDN

When a string is assigned to the returnValue property of window.event, a dialog box appears that gives users the option to stay on the current page and retain the string that was assigned to it. The default statement that appears in the dialog box, "Are you sure you want to navigate away from this page? ... Press OK to continue, or Cancel to stay on the current page.", cannot be removed or altered.

所以在这个例子中，我提出了一个解决方法，我不确定这是否是最好的方法，但我在几个在线银行和 Microsoft 本身在他们的站点注销时看到了这样的行为。

例子:

ASPX

<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    function showConfirmOnLeave() {
        return $("#showConfirm").prop("checked");
    }
    function onLeavePage() {
        if (showConfirmOnLeave()) {
            return "Don't goo";
        }
        else {
            return undefined;
        }
    }
    $(function () {
        if ($("body").attr('onbeforeunload') == null) {
            $("body").attr('onbeforeunload', 'return onLeavePage(event)');
        }
        $(window).unload(function (event) {
            if (showConfirmOnLeave()) {
                window.open(
                    '<%: this.ResolveClientUrl("~/CallOnLeave.aspx") %>',
                    "_blank",
                    "height=100, location=no, menubar=no, resizable=no, scrollbars=no, status=no, titlebar=no, toolbar=no, width=100, left=1, top=1",
                    false
                );
            }
        });
    });
</script>

<input type="checkbox" id="showConfirm" />  Show confirm on exit?

CallOnLeave.ASPX 代码隐藏

    protected void Page_Load(object sender, EventArgs e)
    {
        // add here your custom code, ideally fire a new async thread to execute your commands on the background
    }