onbeforeunload 确认屏幕自定义答案

【问题标题】：onbeforeunload confirmation screen customizationonbeforeunload 确认屏幕自定义
【发布时间】：2009-08-26 15:51:34
【问题描述】：

是否可以在浏览器中为 onbeforeunload 事件创建自定义确认框？我试过了，但后来我得到了 2 个确认框（一个来自我，只不过是返回确认......然后是来自浏览器的标准）。

目前我的代码如下：

var inputChanged = false;

$(window).load(function() {
    window.onbeforeunload = navigateAway;
    $(':input').bind('change', function() { inputChanged = true; });
});

function navigateAway(){
    if(inputChanged){
        return 'Are you sure you want to navigate away?';
    }
}

我正在为此使用 jQuery。

【问题讨论】：

标签： javascript onbeforeunload confirm

【解决方案1】：

window.onbeforeunload = function (e) {
  var message = "Your confirmation message goes here.",
  e = e || window.event;
  // For IE and Firefox
  if (e) {
    e.returnValue = message;
  }

  // For Safari
  return message;
};

请注意：大多数浏览器将此消息放在其他文本之后。您无法完全控制确认对话框的内容。

【讨论】：

很遗憾，确实无法覆盖此屏幕。

【解决方案2】：

不，您无法避免浏览器中的标准选项。您所能做的就是在其中注入一些自定义文本；如果你使用以下事件处理程序（注册原型库的方式）：

Event.observe(window, "beforeunload", function(event) {
    if (showMyBeforeUnloadConfirmation)
        event.returnValue = "foo bar baz";
});

（并且showMyBeforeUnloadConfirmation 为真）您将通过以下文本获得浏览器的标准确认：

您确定要离开此页面吗？

富吧巴兹

按 OK 继续，或按 Cancel 留在当前页面。

[确定][取消]

【讨论】：

【解决方案3】：

我遇到了同样的问题，我能够获得带有我的消息的自己的对话框，但我遇到的问题是：

它会在所有导航上显示消息，我只希望它用于关闭点击。
如果用户选择“取消”，我自己的确认消息仍然会显示浏览器的默认对话框。

以下是我找到的解决方案代码，我写在我的母版页上。

function closeMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event;
    }
    if (evt && evt.clientX >= (window.event.screenX - 150) && evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}

window.onbeforeunload = closeMe;

【讨论】：