javascript - personalizar - Distinguir onbeforeunload para la descarga de archivos frente al cambio de página

onbeforeunload personalizado

Question

Tengo un evento onbeforeunload que se supone que debe onbeforeunload cada vez que un usuario accede a una nueva página. Funciona bastante bien, pero descubrí que también se activa en Chrome cada vez que un usuario descarga un archivo de la página en la que se encuentra.

Me gustaría poder saber si el evento se está desencadenando porque se está desencadenando por una descarga de archivos. ¿Cuál es la mejor manera de hacer eso?

EDITAR: Como aclaración, no soy el propietario del sitio que estoy escuchando antes de onbeforeunload . El evento es escuchado por un fragmento de código Javascript que se está instalando en sitios de terceros.

Answer 1

Un javascript alrededor de

Esa es la única solución de trabajo "limpia" en la que puedo pensar y parece funcionar bien.

Un poco más de código en su pregunta que muestre cómo realmente usa la "carga antes de la descarga" sería genial.

Pero supongo que está utilizando algo como el código siguiente para la animación del cursor "cargando ...".

/* Loading Progress Cursor
 * 
 * Tested on:    IE8, IE11, Chrome 37, & Firefox 31
 * 
 * [1] the wildcard selector is not performant but unavoidable in this case
 */ 
.cursor-loading-progress,
.cursor-loading-progress * { /* [1] */
  cursor: progress !important;
}

La solución

1er paso:

/* hooking the relevant form button
 * on submit we simply add a ''data-showprogresscursor'' with value ''no'' to the html tag
 */
$(".js-btn-download").on(''submit'', function(event) {
    $(''html'').data(''showprogresscursor'', ''no'' );
});

2do paso:

/* [1] when page is about to be unloaded
 * [4] here we have a mechanism that allows to disable this "cursor loading..." animation on demand, this is to cover corner cases (ie. data download triggers ''beforeunload'')
 * [4a] default to ''yes'' if attribute not present, not using true because of jQuery''s .data() auto casting
 * [4b] reset to default value (''yes''), so default behavior restarted from then on
 */
var pageUnloadOrAjaxRequestInProgress = function() {
    /* [4] */
    var showprogresscursor = $(''html'').data(''showprogresscursor'') || ''yes'';  /* [4a] */
    if( showprogresscursor === ''yes'' ){
        $(''html'').addClass(''cursor-loading-progress'');
    }
    else {
        $(''html'').data(''showprogresscursor'', ''yes'' );  /* [4b] */
    }
}

$( window ).on(''beforeunload'', function() {    /* [1] */
    pageUnloadOrAjaxRequestInProgress();
});

Tenga en cuenta que uso $(''html'').addClass(''cursor-loading-progress''); como este es el CSS esperado en mi ejemplo, pero puedes hacer lo que quieras en este momento.

Otro par de puestos de trabajo podrían ser:

• Para abrir la página de descarga de archivos en una nueva pestaña
• Para activar una actualización de página una vez que la descarga del archivo haya terminado

Answer 2

Si agrega download = "[FILENAME]" a la etiqueta a, parece impedir que la descarga antes de la descarga:

<a download="myfile.jpg" href="mysite.com">click me</a>

Esta es una solución mucho más simple. Puede omitir el nombre del archivo y simplemente decir ''descargar'' para usar el nombre de archivo predeterminado. Permítanme señalar que esto tiene el efecto secundario de forzar la descarga en lugar de usar el caché. Creo que esto se agregó a Chrome y FF en 2012. No estoy seguro sobre safari o soporte.