Empêcher toute forme d'actualisation de page à l'aide de jQuery / Javascript

Une fois que l'utilisateur est sur ma page, je ne veux pas qu'il rafraîchisse la page.

1. À tout moment, l'utilisateur F5appuie sur le bouton d'actualisation ou d'actualisation en haut. Il devrait recevoir une alerte disant

   Vous ne pouvez pas actualiser la page.

2. De plus, si l'utilisateur ouvre un nouvel onglet et essaie d'accéder à la même URL dans l'onglet précédent, il devrait recevoir une alerte

   Vous ne pouvez pas ouvrir la même page dans 2 onglets

Quoi qu'il en soit, je peux le faire en utilisant JavaScript ou jQuery? Le premier point est vraiment important.

# 1 peut être implémenté via window.onbeforeunload.

Par exemple:

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

L'utilisateur sera invité avec le message et aura la possibilité de rester sur la page ou de continuer son chemin. Cela devient de plus en plus courant. Stack Overflow le fait si vous essayez de vous éloigner d'une page pendant que vous tapez un message. Vous ne pouvez pas complètement empêcher l'utilisateur de recharger, mais vous pouvez le rendre vraiment effrayant s'ils le font.

Le n ° 2 est plus ou moins impossible. Même si vous suiviez les sessions et les connexions des utilisateurs, vous ne pourrez toujours pas garantir que vous détectiez correctement un deuxième onglet. Par exemple, j'ai peut-être une fenêtre ouverte, puis fermez-la. J'ouvre maintenant une nouvelle fenêtre. Vous détecterez probablement cela comme un deuxième onglet, même si j'ai déjà fermé le premier. Désormais, votre utilisateur ne peut pas accéder à la première fenêtre car il l'a fermée, et il ne peut pas accéder à la deuxième fenêtre car vous le refusez.

En fait, le système en ligne de ma banque fait de son mieux pour faire # 2, et la situation décrite ci-dessus se produit tout le temps. Je dois généralement attendre que la session côté serveur expire avant de pouvoir utiliser à nouveau le système bancaire.

Vous ne pouvez pas empêcher l'utilisateur d'actualiser, et vous ne devriez pas vraiment essayer. Vous devriez revenir sur les raisons pour lesquelles vous avez besoin de cette solution, quel est le problème principal ici ?. Commencez par là et trouvez une autre façon de résoudre le problème. Peut-être avez-vous expliqué pourquoi vous pensez que vous devez le faire, cela aiderait à trouver une telle solution.

Briser les fonctionnalités fondamentales du navigateur n'est jamais une bonne idée, plus de 99,999999999% de l'Internet fonctionne et se rafraîchit avec F5, c'est une attente de l'utilisateur, une que vous ne devriez pas casser.

Bien que ce ne soit pas une bonne idée de désactiver la clé F5, vous pouvez le faire dans JQuery comme ci-dessous.

<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>

J'espère que cela aidera!

À l'époque de CGI, nous avions de nombreuses formes qui déclenchaient diverses actions backend. Tels que les notifications de texte aux groupes, les travaux d'impression, l'agriculture de données, etc.

Si l'utilisateur était sur une page qui disait "Veuillez patienter ... Exécution d'un travail ÉNORME qui pourrait prendre un certain temps.". Ils étaient plus susceptibles de frapper REFRESH et ce serait MAUVAIS!

POURQUOI? Parce que cela déclencherait des travaux plus lents et finirait par enliser le tout.

La solution? Permettez-leur de faire leur forme. Lorsqu'ils soumettent leur formulaire ... Commencez votre travail et dirigez-les vers une autre page qui leur dit d'attendre.

Où la page au milieu contenait en fait les données de formulaire nécessaires pour démarrer le travail. La page WAIT contient cependant une destruction de l'historique javascript. Ainsi, ils peuvent RELOAD cette page d'attente tout ce qu'ils veulent et cela ne déclenchera jamais le démarrage du travail d'origine en arrière-plan car cette page WAIT ne contient que les données de formulaire nécessaires pour WAIT lui-même.

J'espère que cela a du sens.

La fonction de destruction de l'historique les a également empêchés de cliquer sur RETOUR, puis de se rafraîchir.

Il était très transparent et fonctionnait très bien pendant BEAUCOUP D'ANNÉES jusqu'à ce que l'organisation à but non lucratif soit dissoute.

Exemple: ENTRÉE DE FORMULAIRE - Collectez toutes leurs informations et une fois soumises, cela déclenche votre travail de backend.

RÉPONSE à partir de l'entrée de formulaire - Renvoie du code HTML qui effectue une redirection vers votre page d'attente statique et / ou POST / GET vers un autre formulaire (la page WAIT).

WAIT PAGE - Ne contient que les données FORM liées à la page d'attente ainsi que du javascript pour détruire l'historique le plus récent. Comme (-1 OU -2) pour détruire uniquement les pages les plus récentes, mais leur permet toujours de revenir à leur page d'entrée FORM originale.

Une fois qu'ils sont sur votre page WAIT, ils peuvent cliquer sur REFRESH autant qu'ils le souhaitent et cela ne créera jamais le travail FORM d'origine sur le backend. Au lieu de cela, votre page WAIT devrait inclure une actualisation chronométrée META elle-même afin qu'elle puisse toujours vérifier l'état de leur travail. Lorsque leur travail est terminé, ils sont redirigés de la page d'attente vers l'endroit où vous le souhaitez.

S'ils le font manuellement REFRESH ... Ils ajoutent simplement une vérification supplémentaire de leur statut de travail là-dedans.

J'espère que cela pourra aider. Bonne chance.

Non, il n'y en a pas.

Je suis presque sûr qu'il n'y a aucun moyen d'intercepter un clic sur le bouton d'actualisation de JS, et même s'il y en avait, JS peut être désactivé.

Vous devriez probablement prendre du recul par rapport à votre X (empêchant le rafraîchissement) et trouver une solution différente de Y (quoi que ce soit).

Le nombre (2) est possible en utilisant une implémentation de socket (comme websocket, socket.io, etc.) avec un battement de cœur personnalisé pour chaque session dans laquelle l'utilisateur est engagé. Si un utilisateur tente d'ouvrir une autre fenêtre, vous avez une vérification du gestionnaire javascript avec le serveur si tout va bien, puis répondez avec un message d'erreur.

Cependant, une meilleure solution est de synchroniser les deux sessions si possible comme dans Google Docs.

Le problème n ° 2 peut maintenant être résolu à l'aide de BroadcastAPI .

Pour le moment, il n'est disponible que dans Chrome, Firefox et 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);