onbeforeunload确认画面定制onbeforeunload确认画面定制(onbeforeu

2019-05-12 09:05发布

是否有可能创建一个在浏览器中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这一点。

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

请注意:大多数浏览器把这个消息后,一些其他的文字。 您没有确认对话框的内容的完全控制。



Answer 2:

不,你不能避免来自浏览器的标准之一。 所有你能做的就是注入一些自定义文本到它; 如果你使用下面的事件处理(注册原型LIB方式):

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

(和showMyBeforeUnloadConfirmation是真实的),你会得到浏览器的标准确认有以下文字:

你确定要离开这个页面吗?

FOO酒吧巴兹

按确定继续,或取消留在当前页面。

[确定] [取消]



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;


文章来源: onbeforeunload confirmation screen customization