Detectar o fechamento do navegador ou guia

Existe algum código JavaScript / jQuery entre navegadores para detectar se o navegador ou uma guia do navegador está sendo fechada, mas não devido a um link ser clicado?

Se eu entendi corretamente, você quer saber quando uma aba / janela está efetivamente fechada. Bem, o AFAIK, o único caminho em Javascript para detectar esse tipo de coisa, são os events onbeforeunload e onbeforeunload .

Infelizmente (ou felizmente?), Esses events também são triggersdos quando você deixa um site sobre um link ou o botão “Voltar” do seu navegador. Então esta é a melhor resposta que eu posso dar, eu não acho que você pode detectar nativamente um close em Javascript. Me corrija se eu estiver errado aqui.

Da documentação do Firefox

Por alguns motivos, os navegadores baseados em Webkit não seguem a especificação da checkbox de diálogo. Um exemplo quase interligado seria próximo do exemplo abaixo.

 window.addEventListener("beforeunload", function (e) { var confirmationMessage = "\o/"; (e || window.event).returnValue = confirmationMessage; //Gecko + IE return confirmationMessage; //Webkit, Safari, Chrome }); 

Este exemplo para manipular todos os navegadores.

Solução Simples

 window.onbeforeunload = function () { return "Do you really want to close?"; }; 
  var myclose = false; function ConfirmClose() { if (event.clientY < 0) { event.returnValue = 'You have closed the browser. Do you want to logout from your application?'; setTimeout('myclose=false',10); myclose=true; } } function HandleOnClose() { if (myclose==true) { //the url of your logout page which invalidate session on logout location.replace('/contextpath/j_spring_security_logout') ; } } 

// Isso está funcionando no IE7, se você estiver fechando a guia ou o navegador com apenas uma guia

Desculpe, eu não pude adicionar um comentário a uma das respostas existentes, mas no caso de você querer implementar um tipo de diálogo de aviso, eu só queria mencionar que qualquer function manipuladora de evento tem um argumento – evento. No seu caso, você pode chamar event.preventDefault () para proibir a saída da página automaticamente e, em seguida, emitir sua própria checkbox de diálogo. Eu considero isso uma opção muito melhor do que usar alerta padrão e inseguro (). Eu pessoalmente implementei meu próprio conjunto de checkboxs de diálogo baseadas no object kendoWindow (o Kendo UI da Telerik, que é quase totalmente de código aberto, exceto o kendoGrid e o kendoEditor). Você também pode usar checkboxs de diálogo da interface do usuário do jQuery. Observe, no entanto, que essas coisas são assíncronas e você precisará vincular um manipulador ao evento onclick de cada botão, mas isso é muito fácil de implementar.

No entanto, eu concordo que a falta do evento de fechamento real é terrível: se você, por exemplo, quiser redefinir seu estado de session no back-end apenas no caso do fechamento real, isso é um problema.

 $(window).unload( function () { alert("Bye now!"); } ); 

Eu precisava fazer o logout do usuário automaticamente quando o navegador ou a aba se fecha, mas não quando o usuário navega para outros links. Eu também não queria um prompt de confirmação mostrado quando isso acontece. Depois de lutar com isso por um tempo, especialmente com o IE e o Edge, aqui está o que eu terminei de fazer (verifiquei trabalhar com o IE 11, Edge, Chrome e Firefox) depois de basear a abordagem nessa resposta .

Primeiro, inicie um cronômetro de contagem regressiva no servidor no manipulador de events beforeunload em JS. As chamadas ajax precisam ser síncronas para que o IE e o Edge funcionem corretamente. Você também precisa usar o return; para impedir que a checkbox de diálogo de confirmação seja exibida assim:

  window.addEventListener("beforeunload", function (e) { $.ajax({ type: "POST", url: startTimerUrl, async: false }); return; }); 

Iniciar o timer define o sinalizador cancelLogout como false . Se o usuário atualizar a página ou navegar para outro link interno, o sinalizador cancelLogout no servidor será definido como true . Uma vez decorrido o evento do timer, ele verifica o sinalizador cancelLogout para ver se o evento de logout foi cancelado. Se o timer foi cancelado, então pararia o timer. Se o navegador ou a guia fosse fechada, o sinalizador cancelLogout permaneceria falso e o manipulador de events cancelLogout o logout do usuário.

Nota de implementação: Estou usando a ASP.NET MVC 5 e estou cancelando o logout em um método Controller.OnActionExecuted() substituído.

Não há evento, mas há uma window.closed propriedade.closed que é suportada em todos os principais navegadores no momento da redação deste texto. Assim, se você realmente precisasse saber, você poderia pesquisar a janela para verificar essa propriedade.

if(myWindow.closed){do things}

Nota: Polling nada geralmente não é a melhor solução. O evento window.onbeforeunload deve ser usado se possível, a única ressalva é que ele também é triggersdo se você for embora.

Para tarefas semelhantes, você pode usar sessionStorage para armazenar dados localmente até que a guia do navegador seja fechada.

O object sessionStorage armazena dados para apenas uma session (os dados são excluídos quando a guia do navegador é fechada). ( W3Schools )

Esta é minha caneta .

 
dismiss.
 window.onbeforeunload = function() { console.log('event'); return false; //here also can be string, that will be shown to the user } 

tente isso, tenho certeza que isso vai funcionar para você.

   
 window.onbeforeunload = function () { if (isProcess > 0) { return true; } else { //do something } }; 

Esta function mostra uma checkbox de diálogo de confirmação se você fechar a janela ou atualizar a página durante qualquer processo no navegador.Esta function funciona em todos os navegadores.Você deve definir o isProcess var em seu processo de ajax.

 window.addEventListener("beforeunload", function (e) { var confirmationMessage = "tab close"; (e || window.event).returnValue = confirmationMessage; //Gecko + IE sendkeylog(confirmationMessage); return confirmationMessage; //Webkit, Safari, Chrome etc. }); 

Eu encontrei uma maneira, que funciona em todos os meus navegadores .

Testado nas seguintes versões: Firefox 57, Internet Explorer 11, Edge 41, um dos mais recentes Chrome (ele não mostrará minha versão)

Nota : onbeforeunload é acionado se você deixar a página de qualquer maneira possível (atualizar, fechar o navegador, redirect, vincular, enviar …). Se você quer que isso aconteça somente no fechamento do navegador, simplesmente ligue os manipuladores de events.

  $(document).ready(function(){ var validNavigation = false; // Attach the event keypress to exclude the F5 refresh (includes normal refresh) $(document).bind('keypress', function(e) { if (e.keyCode == 116){ validNavigation = true; } }); // Attach the event click for all links in the page $("a").bind("click", function() { validNavigation = true; }); // Attach the event submit for all forms in the page $("form").bind("submit", function() { validNavigation = true; }); // Attach the event click for all inputs in the page $("input[type=submit]").bind("click", function() { validNavigation = true; }); window.onbeforeunload = function() { if (!validNavigation) { // -------> code comes here } }; }); 

Como @jAndy mencionou, não há código javascript para detectar uma janela sendo fechada. Eu comecei pelo que o @Syno havia proposto.

Eu passei por uma situação como essa e desde que você siga estes passos, você será capaz de detectá-lo.
Eu testei no Chrome 67+ e no Firefox 61+.

 var wrapper = function () { //ignore this var closing_window = false; $(window).on('focus', function () { closing_window = false; //if the user interacts with the window, then the window is not being //closed }); $(window).on('blur', function () { closing_window = true; if (!document.hidden) { //when the window is being minimized closing_window = false; } $(window).on('resize', function (e) { //when the window is being maximized closing_window = false; }); $(window).off('resize'); //avoid multiple listening }); $('html').on('mouseleave', function () { closing_window = true; //if the user is leaving html, we have more reasons to believe that he's //leaving or thinking about closing the window }); $('html').on('mouseenter', function () { closing_window = false; //if the user's mouse its on the page, it means you don't need to logout //them, didn't it? }); $(document).on('keydown', function (e) { if (e.keyCode == 91 || e.keyCode == 18) { closing_window = false; //shortcuts for ALT+TAB and Window key } if (e.keyCode == 116 || (e.ctrlKey && e.keyCode == 82)) { closing_window = false; //shortcuts for F5 and CTRL+F5 and CTRL+R } }); // Prevent logout when clicking in a hiperlink $(document).on("click", "a", function () { closing_window = false; }); // Prevent logout when clicking in a button (if these buttons rediret to some page) $(document).on("click", "button", function () { closing_window = false; }); // Prevent logout when submiting $(document).on("submit", "form", function () { closing_window = false; }); // Prevent logout when submiting $(document).on("click", "input[type=submit]", function () { closing_window = false; }); var toDoWhenClosing = function() { //write a code here likes a user logout, example: //$.ajax({ // url: '/MyController/MyLogOutAction', // async: false, // data: { // }, // error: function () { // }, // success: function (data) { // }, //}); }; window.onbeforeunload = function () { if (closing_window) { toDoWhenClosing(); } }; 

};

É possível verificar com a ajuda de window.closed em um manipulador de events no evento ‘unload’ como este, mas o uso de timeout é necessário (portanto, o resultado não pode ser garantido se o smth delay ou impedir que a janela seja fechada):

Exemplo de JSFiddle (testado no Safari, FF, Chrome, Edge e IE11)

 var win = window.open('', '', 'width=200,height=50,left=200,top=50'); win.document.write(` CHILD WINDOW/TAB 

CHILD WINDOW/TAB

`); win.addEventListener('load',() => { document.querySelector('.status').innerHTML += '

Child was loaded!

'; }); win.addEventListener('unload',() => { document.querySelector('.status').innerHTML += '

Child was unloaded!

'; setTimeout(()=>{ document.querySelector('.status').innerHTML += getChildWindowStatus(); },1000); }); win.document.close() document.querySelector('.check-child-window').onclick = ()=> { alert(getChildWindowStatus()); } function getChildWindowStatus() { if (win.closed) { return 'Child window has been closed!'; } else { return 'Child window has not been closed!'; } }

Tente isso. Vai funcionar. O método jquery unload é depreciado.

 window.onbeforeunload = function(event) { event.returnValue = "Write something clever here.."; }; 
  

Eu testei esse script nos seguintes navegadores da Web: No momento, o navegador da Web do Opera não suporta o evento onBeforeUnload. Internet Explorer Mozilla Firefox Google Chrome Safari