javascript - pestaña - jquery beforeunload al cerrar(no abandonar) la página?

javascript onbeforeunload firefox

Question

¿Cómo puedo mostrar "¿Seguro que quieres salir de la página?" cuando el usuario realmente intenta cerrar la página (haga clic en el botón X en la ventana o pestaña del navegador), no cuando intenta navegar fuera de la página (haga clic en otro enlace).

Mi cliente quiere que aparezca un mensaje cuando el usuario intenta cerrar la página "¿Está seguro de que desea abandonar la página? Todavía tiene elementos en su carrito de compras".

Desafortunadamente $(window).bind(''beforeunload'') no se $(window).bind(''beforeunload'') solo cuando el usuario cierra la página.

jQuery:

function checkCart() { 
  $.ajax({
    url : ''index.php?route=module/cart/check'',
    type : ''POST'',
    dataType : ''json'',
    success : function (result) {
       if (result) {
        $(window).bind(''beforeunload'', function(){
          return ''leave?'';
        });
       }
    }
  })
}

Answer 1

Como se indica aquí https://stackoverflow.com/a/1632004/330867 , puede implementarlo "filtrando" lo que está originando la salida de esta página.

Como mencioné en los comentarios, aquí hay una nueva versión del código en la otra pregunta, que también incluye la solicitud ajax que hace en su pregunta:

var canExit = true;

// For every function that will call an ajax query, you need to set the var "canExit" to false, then set it to false once the ajax is finished.

function checkCart() {
  canExit = false;
  $.ajax({
    url : ''index.php?route=module/cart/check'',
    type : ''POST'',
    dataType : ''json'',
    success : function (result) {
       if (result) {
        canExit = true;
       }
    }
  })
}

$(document).on(''click'', ''a'', function() {canExit = true;}); // can exit if it''s a link
$(window).on(''beforeunload'', function() {
    if (canExit) return null; // null will allow exit without a question
    // Else, just return the message you want to display
    return "Do you really want to close?";
});

Importante : No debe tener definida una variable global (aquí canExit ), aquí está para una versión más simple.

Tenga en cuenta que no puede anular completamente el mensaje de confirmación (al menos en chrome). El mensaje que devuelva solo se agregará al proporcionado por Chrome. Este es el motivo: ¿cómo puedo anular el diálogo OnBeforeUnload y reemplazarlo por el mío?

Answer 2

El crédito debería ir aquí: cómo detectar si se hizo clic en un enlace cuando se activó window.onbeforeunload?

Básicamente, la solución agrega un oyente para detectar si un enlace o ventana provocó el evento de descarga para disparar.

var link_was_clicked = false;
document.addEventListener("click", function(e) {
   if (e.target.nodeName.toLowerCase() === ''a'') {
      link_was_clicked = true;
   }
}, true);

window.onbeforeunload = function(e) {
    if(link_was_clicked) {
        return;
    }
    return confirm(''Are you sure?'');
}

Answer 3

Prueba javascript en tu Ajax

window.onbeforeunload = function(){
  return ''Are you sure you want to leave?'';
};

link referencia

Ejemplo 2:

document.getElementsByClassName(''eStore_buy_now_button'')[0].onclick = function(){
    window.btn_clicked = true;
};
window.onbeforeunload = function(){
    if(!window.btn_clicked){
        return ''You must click "Buy Now" to make payment and finish your order. If you leave now your order will be canceled.'';
    }
};

Aquí alertará al usuario cada vez que abandone la página, hasta que haga clic en el botón.

DEMO: http://jsfiddle.net/DerekL/GSWbB/show/

Answer 4

Pruebe esto, cargue datos a través de ajax y visualice a través de la declaración de devolución.

<script type="text/javascript">
function closeWindow(){

    var Data = $.ajax({
        type : "POST",
        url : "file.txt",  //loading a simple text file for sample.
        cache : false,
        global : false,
        async : false,
        success : function(data) {
            return data;
        }

    }).responseText;


    return "Are you sure you want to leave the page? You still have "+Data+" items in your shopping cart";
}

window.onbeforeunload = closeWindow;
</script>

Answer 5

Puede probar el evento '' onbeforeunload ''.

También eche un vistazo a esto-

El cuadro de diálogo se ejecuta durante 1 segundo y desaparece.

Answer 6

Puedes hacer esto usando JQuery .

Por ejemplo ,

<a href="your URL" id="navigate"> click here </a>

Tu JQuery será,

$(document).ready(function(){

    $(''a'').on(''mousedown'', stopNavigate);

    $(''a'').on(''mouseleave'', function () {
           $(window).on(''beforeunload'', function(){
                  return ''Are you sure you want to leave?'';
           });
    });
});

function stopNavigate(){    
    $(window).off(''beforeunload'');
}

Y para obtener la alerta Dejar mensaje será,

$(window).on(''beforeunload'', function(){
      return ''Are you sure you want to leave?'';
});

$(window).on(''unload'', function(){

         logout();

});

Esta solución funciona en todos los navegadores y la he probado.

Answer 7

Solución jQuery:

Con ''beforeunload'' evento ''beforeunload'' adjunto, al cerrar la página, presionar el botón Atrás o volver a cargar la página, aparecerá un cuadro de confirmación para preguntarle si realmente desea ir, elija aceptar para salir de la página: cancelar para detener la página salir y permanecer en la misma página.

Además, puede agregar su propio mensaje dentro del cuadro de confirmación:

$(window).bind(''beforeunload'', function(){
    return ''>>>>>Before You Go<<<<<<<< /n Your custom message go here'';
});

PD: ''beforeunload'' evento ''beforeunload'' es compatible desde jQuery 1.4.

Javascript:

Para IE y FF <4, configure window.event.returnValue como la cadena que desea visualizar, y luego devuélvala para Safari (use null lugar para permitir el comportamiento normal):

window.onbeforeunload = function (e) {
    var e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = ''Any string'';
    }

    // For Safari
    return ''Any string'';
};