离开确认屏幕自定义

Question

在浏览器中，是否有可能为onbeforeunload事件创建自定义确认框？我尝试过，但结果是我得到了两个确认框（一个是我的确认框，只是简单的返回confirm...，然后是浏览器的标准确认框）。

目前我的代码如下：

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实现此功能。

- Nyla Pareska

Answer 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;
};

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

- Eli Grey

---

很遗憾，不能覆盖这个屏幕。 - Nyla Pareska

Answer 2

不，你无法避免浏览器默认的标准文本。你可以注入一些自定义的文本；如果你使用以下事件处理程序（以原型库方式注册）：

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

如果showMyBeforeUnloadConfirmation为真，您将获得浏览器的标准确认对话框，其中包含以下文本：

您确定要离开此页面吗？

foo bar baz

按“确定”继续，或按“取消”停留在当前页面。

[ 确定 ] [ 取消 ]

- Justin Ludwig

Answer 3

我遇到了同样的问题，我能够得到自己的对话框和我的信息，但我面临的问题是：

1. 它在所有导航上都会给出消息，而我只想在关闭点击时才显示。
2. 如果用户选择“取消”，即使有我的确认消息，它仍然显示浏览器的默认对话框。

以下是我找到的解决方案代码，我将其写在我的主页面上。

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;

- Imran Rizvi