Evite cualquier forma de actualización de la página usando jQuery / Javascript

Una vez que el usuario está en mi página, no quiero que actualice la página.

1. En cualquier momento, el usuario F5presiona o actualiza el botón en la parte superior. Debería recibir una alerta diciendo

   No puede actualizar la página.

2. Además, si el usuario abre una nueva pestaña e intenta acceder a la misma URL en la pestaña anterior, debería recibir una alerta.

   No puede abrir la misma página en 2 pestañas

De todos modos, ¿puedo hacer esto usando JavaScript o jQuery? El punto uno es realmente importante.

# 1 se puede implementar a través de window.onbeforeunload.

Por ejemplo:

<script type="text/javascript">
    window.onbeforeunload = function() {
        return "Dude, are you sure you want to leave? Think of the kittens!";
    }
</script>

Se le pedirá al usuario el mensaje y se le dará la opción de permanecer en la página o continuar su camino. Esto es cada vez más común. Stack Overflow hace esto si intenta navegar fuera de una página mientras escribe una publicación. No puede evitar por completo que el usuario vuelva a cargar, pero puede hacer que suene realmente aterrador si lo hace.

# 2 es más o menos imposible. Incluso si realizó un seguimiento de las sesiones y los inicios de sesión de los usuarios, aún no podría garantizar que detectaba una segunda pestaña correctamente. Por ejemplo, tal vez tenga una ventana abierta y luego la cierre. Ahora abro una nueva ventana. Es probable que lo detecte como una segunda pestaña, aunque ya cerré la primera. Ahora su usuario no puede acceder a la primera ventana porque la cerró y no puede acceder a la segunda ventana porque usted se lo niega.

De hecho, el sistema en línea de mi banco se esfuerza mucho por hacer el n. ° 2, y la situación descrita anteriormente ocurre todo el tiempo. Por lo general, tengo que esperar hasta que expire la sesión del lado del servidor antes de poder usar el sistema bancario nuevamente.

No puede evitar que el usuario se actualice, ni debería intentarlo. Debería volver a por qué necesita esta solución, ¿cuál es la raíz del problema aquí? Empiece por ahí y encuentre una forma diferente de resolver el problema. Tal vez, si explicó por qué cree que necesita hacer esto, podría ayudar a encontrar una solución de este tipo.

Romper las características fundamentales del navegador nunca es una buena idea, más del 99.999999999% de Internet funciona y se actualiza con F5, esta es una expectativa del usuario, una que no debes romper.

Aunque no es una buena idea deshabilitar la tecla F5, puede hacerlo en JQuery como se muestra a continuación.

<script type="text/javascript">
function disableF5(e) { if ((e.which || e.keyCode) == 116 || (e.which || e.keyCode) == 82) e.preventDefault(); };

$(document).ready(function(){
     $(document).on("keydown", disableF5);
});
</script>

¡Espero que esto ayude!

En los viejos tiempos de CGI teníamos muchas formas que desencadenarían varias acciones de backend. Como notificaciones de texto a grupos, trabajos de impresión, cultivo de datos, etc.

Si el usuario estaba en una página que decía "Por favor espere ... Realizando un trabajo ENORME que podría llevar algún tiempo" ¡Era más probable que pulsaran ACTUALIZAR y esto sería MALO!

¿POR QUÉ? Porque desencadenaría trabajos más lentos y eventualmente empantanaría todo.

¿La solución? Permítales hacer su forma. Cuando envíen su formulario ... Comience su trabajo y luego diríjalos a otra página que les diga que esperen.

Donde la página en el medio realmente contenía los datos del formulario que se necesitaban para comenzar el trabajo. Sin embargo, la página WAIT contiene una destrucción del historial de JavaScript. Para que puedan RECARGAR esa página de espera todo lo que quieran y nunca activará el trabajo original para que comience en segundo plano, ya que esa página de ESPERA solo contiene los datos del formulario necesarios para la ESPERA en sí.

Espero que tenga sentido.

La función de destrucción del historial también les impidió hacer clic en ATRÁS y luego actualizar también.

Fue muy fluido y funcionó muy bien durante MUCHOS MUCHOS años hasta que la organización sin fines de lucro se cerró.

Ejemplo: ENTRADA DE FORMULARIO: recopile toda su información y, cuando se envíe, esto activará su trabajo de backend.

RESPONSE from form entry - Devuelve HTML que realiza una redirección a su página de espera estática y / o POST / GET a otro formulario (la página WAIT).

PÁGINA DE ESPERA: solo contiene datos de FORMULARIO relacionados con la página de espera, así como javascript para destruir el historial más reciente. Me gusta (-1 O -2) para destruir solo las páginas más recientes, pero aún les permite volver a su página de entrada FORM original.

Una vez que estén en su página de ESPERA, pueden hacer clic en ACTUALIZAR tanto como quieran y nunca generará el trabajo de FORMULARIO original en el backend. En cambio, su página WAIT debe incluir una actualización programada META para que siempre pueda verificar el estado de su trabajo. Cuando se completa su trabajo, se les redirige fuera de la página de espera a donde desee.

Si lo hacen ACTUALIZAR manualmente ... Simplemente están agregando una verificación más del estado de su trabajo allí.

Espero que ayude. Buena suerte.

No, no lo hay.

Estoy bastante seguro de que no hay forma de interceptar un clic en el botón de actualización de JS, e incluso si lo hubiera, JS se puede desactivar.

Probablemente debería alejarse de su X (evitando la actualización) y encontrar una solución diferente a Y (cualquiera que sea).

El problema # 2 ahora se puede resolver usando BroadcastAPI .

Por el momento, solo está disponible en Chrome, Firefox y Opera.

var bc = new BroadcastChannel('test_channel');

bc.onmessage = function (ev) { 
    if(ev.data && ev.data.url===window.location.href){
       alert('You cannot open the same page in 2 tabs');
    }
}

bc.postMessage(window.location.href);

El número (2) es posible mediante el uso de una implementación de socket (como websocket, socket.io, etc.) con un latido personalizado para cada sesión en la que participa el usuario. Si un usuario intenta abrir otra ventana, tiene una verificación del controlador de JavaScript con el servidor si está bien, y luego responda con un mensaje de error.

Sin embargo, una mejor solución es sincronizar las dos sesiones, si es posible, como en los documentos de Google.