w3schools - ¿Cómo puedo evitar que Window.onbeforeunload active los enlaces javascript: href en IE?

window onbeforeunload change text

Question

Estoy construyendo una falla segura para mi formulario que va a advertir a los usuarios que si abandonan la página se perderán los datos de su formulario (similar a lo que hace Gmail).

window.onbeforeunload = function () {    
        if (formIsDirty) {
            return "You have unsaved data on this form. Don''t leave!";
        }
}

La función anterior funciona muy bien en Firefox, pero en IE se desencadena por cualquier enlace href, incluso aquellos que son enlaces a JavaScript y no a otras páginas.

por ejemplo....

<a href=''javascript:someFunction();''>click</a>

Me pregunto si hay alguna forma de evitar esto, ya que no quiero que el usuario piense que está abandonando la página cuando simplemente está haciendo clic en un botón. No tengo la opción de volver a escribir todos los enlaces, ya que están integrados y son numerosos.

¿Algunas ideas?

Answer 1

(Como algunas de las otras respuestas, esto requiere cambiar la forma en que se vincula el JavaScript. Si eso no funciona, descarte).

Encontré que en IE 7 a IE 10, simplemente usar jQuery .click () con preventDefault funciona sin mostrar el mensaje onbeforeunload (IE 11 no muestra el mensaje de beforeunload para ninguno de mis casos de prueba). Esto es cierto ya sea que href sea ''#'' o javascript:void(0) . Espero que la conclusión se attachEvent si attachEvent / addEventListener se usa directamente, pero no lo he probado.

Hay una demostración del siguiente en http://jsbin.com/tatufehe/1 . Ambas versiones (en verde) con el trabajo preventDefault (no muestran el diálogo de beforeunload la beforeunload ). El que no tiene preventDefault lo muestra (como comparación).

$( document ).ready( function () {
  $( ''a'' ).click( function ( evt ) {
    $( ''#display'' ).text( ''You clicked: '' + $( this ).text() );

    if ( $(this).hasClass( ''withPreventDefault'' ) ) {
      evt.preventDefault();
    }
  } );
})

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

<p id="display"></p>

<p><a class="withPreventDefault" href="#">Number sign link *with* preventDefault</a></p>

<p><a class="withPreventDefault" href="javascript:void(0);">JavaScript href link *with* preventDefault</a></p>

<p><a href="javascript:void(0);">JavaScript href link *without* preventDefault</a></p>

Answer 2

Me encontré con un problema similar y encontré una solución muy fácil:

$("a").mousedown(function() {
    $(window).unbind();
});

Esto eliminará el evento onbeforeunload justo antes de que se active el evento click.

Answer 3

Mueva cualquier script a un controlador de eventos click , con una página alternativa para usuarios sin JavaScript:

<a href="foo.html" onclick="someFunction(); return false">click</a>

Los discretos campeones de JS probablemente se opondrán al uso del atributo onclick , pero el hecho es que funciona, es la forma más sencilla de agregar un controlador de eventos y la forma más simple de proporcionar un ejemplo. Para una mejor separación de inquietudes, podría utilizar una propiedad de clic en DOM0, addEventListener() / attachEvent() o una biblioteca.

Answer 4

Puede eliminar y reasignar la onbeforeunload al pasar esos enlaces:

jQuery(
  function($)
  {
      //store onbeforeunload for later use
    $(window).data(''beforeunload'',window.onbeforeunload);  

      //remove||re-assign onbeforeunload on hover 
    $(''a[href^="javascript:"]'')
      .hover( 
             function(){window.onbeforeunload=null;},
             function(){window.onbeforeunload=$(window).data(''beforeunload'');}
            );

  }
);

Answer 5

Si el mouse del usuario está en un enlace y activan la página de actualización con el teclado o activan un vínculo con el teclado, el mensaje no se mostrará. Entonces, el enfoque de Dr.Molle no funcionará en este raro caso.

Answer 6

Si incluye un símbolo de marcador en el href de la etiqueta a, podrá seguir utilizando el evento onclick para incluir su JavaScript.

<a href="#" onclick=''someFunction();''>click</a>

He realizado varias pruebas y parece que se ejecuta el JavaScript sin activar el evento onbeforeunload. Me gustaría saber si esto funciona para otros o si aún tienes el mismo problema después de implementar las etiquetas de esta manera.