Pergunta

É possível criar uma caixa de confirmação personalizada para o evento OnBeforeUnload em um navegador? Eu tentei, mas depois recebo 2 caixas de confirmação (uma minha, que nada mais é do que retornar confirmar ... e depois a padrão do navegador).

No momento, meu código parece:

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

Estou usando o jQuery para isso.

Foi útil?

Solução

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

Observação: a maioria dos navegadores coloca esta mensagem após outro texto. Você não tem controle completo do conteúdo da caixa de diálogo de confirmação.

Outras dicas

Não, você não pode evitar o padrão do navegador. Tudo o que você pode fazer é injetar algum texto personalizado nele; Se você usar o seguinte manipulador de eventos (registrou o protótipo Lib Way):

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

(e showMyBeforeUnloadConfirmation é verdade) você receberá a confirmação padrão do navegador com o seguinte texto:

Tem certeza de que deseja navegar para longe desta página?

Foo Bar Baz

Pressione OK para continuar ou cancelar para permanecer na página atual.

OK] [Cancelar

Eu enfrentei o mesmo problema, consegui obter sua própria caixa de diálogo com minha mensagem, mas os problemas que enfrentei foram:

  1. Estava dando uma mensagem em todas as navegações e eu queria apenas para clique em cliques.
  2. Com minha própria mensagem de confirmação se o usuário selecionar "Cancelar", ele ainda mostra a caixa de diálogo padrão do navegador.

A seguir, o código de soluções que encontrei, que escrevi na minha página de mestrado.

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;
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top