javascript - pestaña - Cómo capturar el evento de cerrar la ventana del navegador?

evitar cerrar ventana javascript

Question

Quiero capturar el evento de cerrar ventana / pestaña del navegador. He intentado lo siguiente con jQuery:

jQuery(window).bind(
    "beforeunload", 
    function() { 
        return confirm("Do you really want to close?") 
    }
)

Pero también funciona en el envío de formularios, que no es lo que quiero. Quiero un evento que se active solo cuando el usuario cierre la ventana.

Answer 1

A partir de jQuery 1.7, el método .live () está en desuso. Use .on () para adjuntar manejadores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate () en preferencia a .live ()

$(window).bind("beforeunload", function() {
    return true || confirm("Do you really want to close?"); 
}); 

en completo o enlace

$(window).unbind();

Answer 2

Desafortunadamente, si se trata de una recarga, una nueva página redirigida o un navegador cerrado, se activará el evento. Una alternativa es atrapar la identificación que desencadena el evento y si es la forma no desencadenar ninguna función y si no es la identificación del formulario, entonces haz lo que quieras hacer cuando la página se cierre. No estoy seguro si eso también es posible directamente y es tedioso.

Puede hacer algunas cosas pequeñas antes de que el cliente cierre la pestaña. javascript detectar navegador cerrar pestaña / cerrar navegador pero si su lista de acciones es grande y la pestaña se cierra antes de que termine usted está indefenso. Puedes intentarlo pero con mi experiencia no dependas de él.

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "/o/";
  /* Do you small action code here */
  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/beforeunload?redirectlocale=en-US&redirectslug=DOM/Mozilla_event_reference/beforeunload

Answer 3

El evento beforeunload se beforeunload siempre que el usuario abandona su página por algún motivo.

Por ejemplo, se activará si el usuario envía un formulario, hace clic en un enlace, cierra la ventana (o pestaña) o va a una nueva página usando la barra de direcciones, el cuadro de búsqueda o un marcador.

Puede excluir envíos de formularios e hipervínculos (excepto desde otros marcos) con el siguiente código:

var inFormOrLink;
$(''a'').on(''click'', function() { inFormOrLink = true; });
$(''form'').on(''submit'', function() { inFormOrLink = true; });

$(window).on("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
})

Para las versiones de jQuery anteriores a la 1.7, intente esto:

var inFormOrLink;
$(''a'').live(''click'', function() { inFormOrLink = true; });
$(''form'').bind(''submit'', function() { inFormOrLink = true; });

$(window).bind("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
})

El método live no funciona con el evento submit , por lo que si agrega un nuevo formulario, también deberá vincular el controlador.

Tenga en cuenta que si un controlador de eventos diferente cancela el envío o la navegación, perderá el aviso de confirmación si la ventana se cierra más tarde. Puede solucionarlo registrando la hora en los eventos de submit y click , y verificando si la beforeunload ocurre más de un par de segundos más tarde.

Answer 4

Lo siguiente funcionó para mí;

 $(window).unload(function(event) {
    if(event.clientY < 0) {
        //do whatever you want when closing the window..
    }
 });

Answer 5

Mi problema: el evento ''onbeforeunload'' solo se activará si hubiera un número impar de envíos (clics). Tenía una combinación de soluciones de hilos similares en SO para que mi solución funcionara. Bueno, mi código hablará.

<!--The definition of event and initializing the trigger flag--->


$(document).ready(function() {
updatefgallowPrompt(true);
window.onbeforeunload = WarnUser;   
}

function WarnUser() {
var allowPrompt = getfgallowPrompt();
    if(allowPrompt) {
    saveIndexedDataAlert();
    return null;
    } else {
        updatefgallowPrompt(true);
        event.stopPropagation
    }
}

<!--The method responsible for deciding weather the unload event is triggered from submit or not--->
function saveIndexedDataAlert() {
    var allowPrompt = getfgallowPrompt();
    var lenIndexedDocs = parseInt($(''#sortable3 > li'').size()) + parseInt($(''#sortable3 > ul'').size());

    if(allowPrompt && $.trim(lenIndexedDocs) > 0) {
        event.returnValue = "Your message";
    } else {
        event.returnValue = "   ";
        updatefgallowPrompt(true);
    }
}

<!---Function responsible to reset the trigger flag---->
$(document).click(function(event) {  
$(''a'').live(''click'', function() { updatefgallowPrompt(false); });
 });

<!--getter and setter for the flag---->
function updatefgallowPrompt (allowPrompt){ //exit msg dfds
    $(''body'').data(''allowPrompt'', allowPrompt); 
}   

function getfgallowPrompt(){        
    return $(''body'').data(''allowPrompt'');   
}

Answer 6

Mi respuesta está dirigida a proporcionar puntos de referencia simples.

CÓMO

Ver la respuesta de @SLaks .

$(window).on("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
})

¿Cuánto tiempo tarda el navegador en cerrar finalmente la página?

Cada vez que un usuario cierra la página (botón x o CTRL + W ), el navegador ejecuta el código de beforeunload , pero no indefinidamente. La única excepción es el cuadro de confirmación ( return ''Do you really want to close? ) Que esperará hasta la respuesta del usuario.

Chrome : 2 segundos.
Firefox : ∞ (o haz doble clic, o forza al cerrar)
Edge : ∞ (o doble clic)
Explorer 11 : 0 segundos.
Safari : TODO

Lo que usamos para probar esto:

• Un servidor Express de Node.js con registro de solicitudes
• El siguiente archivo HTML corto

Lo que hace es enviar tantas solicitudes como sea posible antes de que el navegador cierre su página (sincrónicamente).

<html>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
    function request() {
        return $.ajax({
            type: "GET",
            url: "http://localhost:3030/" + Date.now(),
            async: true
        }).responseText;
    }
    window.onbeforeunload = () => {
        while (true) {
            request();
        }
        return null;
    }
    </script>
</body>
</html>

Salida de Chrome:

GET /1480451321041 404 0.389 ms - 32  
GET /1480451321052 404 0.219 ms - 32  
...  
GET /hello/1480451322998 404 0.328 ms - 32

1957ms ≈ 2 seconds // we assume it''s 2 seconds since requests can take few milliseconds to be sent.

Answer 7

Para una solución de navegador cruzado (probado en Chrome 21, IE9, FF15), considere usar el siguiente código, que es una versión ligeramente ajustada del código de Slaks:

var inFormOrLink;
$(''a'').live(''click'', function() { inFormOrLink = true; });
$(''form'').bind(''submit'', function() { inFormOrLink = true; });

$(window).bind(''beforeunload'', function(eventObject) {
    var returnValue = undefined;
    if (! inFormOrLink) {
        returnValue = "Do you really want to close?";
    }
    eventObject.returnValue = returnValue;
    return returnValue;
}); 

Tenga en cuenta que desde Firefox 4, el mensaje "¿De verdad quieres cerrar?" no se muestra. FF solo muestra un mensaje genérico. Ver nota en https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload

Answer 8

Para una solución que funcionó bien con controles de terceros como Telerik (ej .: RadComboBox) y DevExpress que usan las etiquetas Anchor por varias razones, considere usar el siguiente código, que es una versión ligeramente modificada del código de desm con un mejor selector para uno mismo segmentación de etiquetas de anclaje:

var inFormOrLink;
$(''a[href]:not([target]), a[href][target=_self]'').live(''click'', function() { inFormOrLink = true; });
$(''form'').bind(''submit'', function() { inFormOrLink = true; });

$(window).bind(''beforeunload'', function(eventObject) {
    var returnValue = undefined;
    if (! inFormOrLink) {
        returnValue = "Do you really want to close?";
    }
    eventObject.returnValue = returnValue;
    return returnValue;
});

Answer 9

Prueba esto también

window.onbeforeunload = function ()
{       
    if (pasteEditorChange) {
        var btn = confirm(''Do You Want to Save the Changess?'');
           if(btn === true ){
               SavetoEdit();//your function call
           }
           else{
                windowClose();//your function call
           }
    }  else { 
        windowClose();//your function call
    }
};

Answer 10

Quizás pueda manejar OnSubmit y establecer un indicador que luego verifique en su controlador OnBeforeUnload.

Answer 11

Si el envío de su formulario los lleva a otra página (como supongo que lo hace, de ahí el desencadenamiento de beforeunload ), podría intentar cambiar su envío de formulario a una llamada ajax. De esta forma, no abandonarán su página cuando envíen el formulario y usted podrá usar su código de enlace de beforeunload como lo desee.

Answer 12

Solo verifica ...

function wopen_close(){
  var w = window.open($url, ''_blank'', ''width=600, height=400, scrollbars=no, status=no, resizable=no, screenx=0, screeny=0'');
  w.onunload = function(){
    if (window.closed) {
       alert("window closed");
    }else{ 
       alert("just refreshed");
    }
  }
}

Answer 13

Tal vez simplemente desenlazar el beforeunload evento beforeunload dentro del controlador de eventos submit del submit :

jQuery(''form'').submit(function() {
    jQuery(window).unbind("beforeunload");
    ...
});

Answer 14

Utilicé la respuesta de Slaks, pero eso no funcionaba como estaba, ya que el valor de retorno onbeforeunload se analiza como una cadena y luego se muestra en el cuadro de confirmaciones del navegador. Entonces se mostró el valor verdadero, como "verdadero".

Solo usando el retorno funcionó. Aquí está mi código

var preventUnloadPrompt;
var messageBeforeUnload = "my message here - Are you sure you want to leave this page?";
//var redirectAfterPrompt = "http://www.google.co.in";
$(''a'').live(''click'', function() { preventUnloadPrompt = true; });
$(''form'').live(''submit'', function() { preventUnloadPrompt = true; });
$(window).bind("beforeunload", function(e) { 
    var rval;
    if(preventUnloadPrompt) {
        return;
    } else {
        //location.replace(redirectAfterPrompt);
        return messageBeforeUnload;
    }
    return rval;
})

Answer 15

jQuery(window).bind(
                    "beforeunload",
                      function (e) {
                          var activeElementTagName = e.target.activeElement.tagName;
                          if (activeElementTagName != "A" && activeElementTagName != "INPUT") {
                              return "Do you really want to close?";
                          }
                      })

Answer 16

var validNavigation = false;
            jQuery(document).ready(function () {

                wireUpEvents();
            });

            function endSession() {
                // Browser or broswer tab is closed
                // Do sth here ...
                alert("bye");
            }

            function wireUpEvents() {
                /*
                * For a list of events that triggers onbeforeunload on IE
                * check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
                */
                window.onbeforeunload = function () {
                    debugger
                    if (!validNavigation) {
                        endSession();
                    }
                }

                // Attach the event keypress to exclude the F5 refresh
                $(document).bind(''keypress'', function (e) {
                    debugger
                    if (e.keyCode == 116) {
                        validNavigation = true;
                    }
                });

                // Attach the event click for all links in the page
                $("a").bind("click", function () {
                    debugger
                    validNavigation = true;
                });

                // Attach the event submit for all forms in the page
                $("form").bind("submit", function () {
                    debugger
                    validNavigation = true;
                });

                // Attach the event click for all inputs in the page
                $("input[type=submit]").bind("click", function () {
                    debugger
                    validNavigation = true;
                });

            }`enter code here`

Answer 17

window.onbeforeunload = function () {
    return "Do you really want to close?";
};