Como substituir a caixa de diálogo OnBeforeUnload e substituí-la pela minha?

Preciso avisar os usuários sobre alterações não salvas antes de deixarem uma página (um problema bastante comum).

window.onbeforeunload=handler

Isso funciona, mas gera uma caixa de diálogo padrão com uma mensagem padrão irritante que envolve meu próprio texto. Eu preciso substituir completamente a mensagem padrão, para que meu texto seja claro ou (melhor ainda) substituir toda a caixa de diálogo por uma caixa de diálogo modal usando jQuery.

Até agora, falhei e não encontrei mais ninguém que pareça ter uma resposta. Isso é possível?

Javascript na minha página:

<script type="text/javascript">   
   window.onbeforeunload=closeIt;
</script>

A função closeIt ():

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

Usando jQuery e jqModal, tentei esse tipo de coisa (usando um diálogo de confirmação personalizado):

$(window).beforeunload(function() {
        confirm('new message: ' + this.href + ' !', this.href);
        return false;
    });

o que também não funciona - não consigo vincular o evento beforeunload.

Você não pode modificar o diálogo padrão para onbeforeunload, portanto, sua melhor aposta pode ser trabalhar com ele.

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

Aqui está uma referência a isso da Microsoft:

Quando uma string é atribuída à propriedade returnValue de window.event, aparece uma caixa de diálogo que oferece aos usuários a opção de permanecer na página atual e manter a string que foi atribuída a ela. A instrução padrão que aparece na caixa de diálogo "Tem certeza de que deseja sair desta página? ... Pressione OK para continuar ou Cancelar para permanecer na página atual.", Não pode ser removida ou alterada.

O problema parece ser:

1. Quando onbeforeunloadé chamado, o valor de retorno do manipulador será assumido como window.event.returnValue.
2. Ele analisará o valor de retorno como uma sequência (a menos que seja nulo).
3. Como falseé analisado como uma sequência, a caixa de diálogo será acionada, a qual passará um true/ apropriado false.

O resultado é, não parece ser uma maneira de atribuir falsea onbeforeunloadpara impedir que o diálogo padrão.

Notas adicionais sobre o jQuery:

• A configuração do evento no jQuery pode ser problemática, pois isso permite que outros onbeforeunloadeventos ocorram também. Se você deseja apenas que o seu evento de descarregamento ocorra, devo usar o JavaScript simples.

• O jQuery não possui um atalho para onbeforeunloadque você precise usar a bindsintaxe genérica .

  $(window).bind('beforeunload', function() {} );

Editar 09/04/2018 : as mensagens personalizadas nas caixas de diálogo onbeforeunload estão obsoletas desde o chrome-51 (cf: nota de versão )

O que funcionou para mim, usando o jQuery e testado no IE8, Chrome e Firefox, é:

$(window).bind("beforeunload",function(event) {
    if(hasChanged) return "You have unsaved changes";
});

É importante não retornar nada se nenhum prompt for necessário, pois há diferenças entre o IE e outros comportamentos do navegador aqui.

Embora não haja nada que você possa fazer sobre a caixa em algumas circunstâncias, você pode interceptar alguém clicando em um link. Para mim, valeu a pena o esforço para a maioria dos cenários e, como alternativa, deixei o evento de descarregamento.

Eu usei o Boxy em vez do Diálogo jQuery padrão, ele está disponível aqui: http://onehackoranother.com/projects/jquery/boxy/

$(':input').change(function() {
    if(!is_dirty){
        // When the user changes a field on this page, set our is_dirty flag.
        is_dirty = true;
    }
});

$('a').mousedown(function(e) {
    if(is_dirty) {
        // if the user navigates away from this page via an anchor link, 
        //    popup a new boxy confirmation.
        answer = Boxy.confirm("You have made some changes which you might want to save.");
    }
});

window.onbeforeunload = function() {
if((is_dirty)&&(!answer)){
            // call this if the box wasn't shown.
    return 'You have made some changes which you might want to save.';
    }
};

Você pode se conectar a outro evento e filtrar mais sobre que tipo de âncora foi clicada, mas isso funciona para mim e o que eu quero fazer e serve como um exemplo para outras pessoas usarem ou melhorarem. Pensei em compartilhar isso para aqueles que desejam esta solução.

Recortei o código, portanto, isso pode não funcionar como está.

1) Use onbeforeunload, não onunload.

2) O importante é evitar a execução de uma declaração de retorno. Com isso, não pretendo evitar retornar do seu manipulador. Você retorna bem, mas faz isso garantindo que você chegue ao final da função e NÃO execute uma declaração de retorno. Sob essas condições, o diálogo padrão interno não ocorre.

3) Você pode, se você usar onbeforeunload, executar uma chamada ajax em seu manipulador unbeforeunload para organizar o servidor, mas deve ser síncrono, e você deverá aguardar e manipular a resposta em seu manipulador onbeforeunload (ainda respeitando condição (2) acima). Eu faço isso e funciona bem. Se você fizer uma chamada ajax síncrona, tudo será mantido até a resposta voltar. Se você fizer uma assíncrona, pensando que não se importa com a resposta do servidor, o descarregamento da página continuará e sua chamada ajax será abortada por esse processo - incluindo um script remoto, se estiver em execução.

Tente colocar uma return;mensagem em vez de uma mensagem .. isso está funcionando para muitos navegadores para mim. (Isso realmente impede os presentes da caixa de diálogo)

window.onbeforeunload = function(evt) {            
        //Your Extra Code
        return;
}

Isso não pode ser feito no chrome agora para evitar spam, consulte javascript onbeforeunload não mostrando mensagem personalizada para obter mais detalhes.

Você pode detectar qual botão (ok ou cancelar) pressionado pelo usuário, porque a função onunload é chamada apenas quando o usuário escolhe sair da página. Embora nesta função as possibilidades sejam limitadas, porque o DOM está sendo recolhido. Você pode executar o javascript, mas o POST do ajax não faz nada; portanto, você não pode usar esse método para o logout automático. Mas existe uma solução para isso. O window.open ('logout.php') é executado na função onunload, para que o usuário saia com uma nova janela.

function onunload = (){
    window.open('logout.php');
}

Esse código é chamado quando o usuário sai da página ou fecha a janela ativa e o usuário desconectado por 'logout.php'. A nova janela fecha imediatamente quando o logout php consiste em código:

window.close();

Enfrentei o mesmo problema, estava bem em obter sua própria caixa de diálogo com a minha mensagem, mas o problema que enfrentei foi: 1) Ele estava dando uma mensagem em todas as navegações. Quero apenas um clique para fechar. 2) com minha própria mensagem de confirmação, se o usuário selecionar cancelar, ainda mostrará a caixa de diálogo padrão do navegador.

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

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;

 <script type="text/javascript">
        window.onbeforeunload = function(evt) {
            var message = 'Are you sure you want to leave?';
            if (typeof evt == 'undefined') {
                evt = window.event;
            }       
            if (evt) {
                evt.returnValue = message;
            }
            return message;
        } 
    </script>

consulte http://www.codeprojectdownload.com

Que tal usar a versão especializada do comando "bind" "one". Depois que o manipulador de eventos é executado pela primeira vez, é automaticamente removido como manipulador de eventos.

$(window).one("beforeunload", BeforeUnload);

Abordagem angular 9:

constructor() {
    window.addEventListener('beforeunload', (event: BeforeUnloadEvent) => {
     if (this.generatedBarcodeIndex) {
      event.preventDefault(); // for Firefox
      event.returnValue = ''; // for Chrome
      return '';
     }
     return false;
    });
   }

Suporte a navegadores e remoção da mensagem personalizada:

• O Chrome removeu o suporte para a mensagem personalizada na versão 51 min
• O Opera removeu o suporte para a mensagem personalizada na versão 38 min
• O Firefox removeu o suporte para a mensagem personalizada na versão 44.0 min
• O Safari removeu o suporte para a mensagem personalizada na versão 9.1 min