Empêcher toute forme de rafraîchissement de la page à l'aide de jQuery/Javascript

Question

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

1. À tout moment, l'utilisateur appuie sur F5 ou le bouton d'actualisation en haut de la page. Il devrait recevoir une alerte disant

   Vous ne pouvez pas actualiser la page.

2. De même, si l'utilisateur ouvre un nouvel onglet et tente 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

Comment puis-je faire cela en utilisant JavaScript ou jQuery ? Le premier point est très important.

Answer 1

1 peut être mis en œuvre 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 est invité à lire le message et a la possibilité de rester sur la page ou de poursuivre son chemin. Cela devient de plus en plus courant. Stack Overflow le fait si vous essayez de quitter une page alors que vous êtes en train de taper un message. Vous ne pouvez pas empêcher complètement l'utilisateur de recharger la page, mais vous pouvez faire en sorte qu'il ait l'air vraiment effrayé s'il le fait.

Le n° 2 est plus ou moins impossible. Même si vous suiviez les sessions et les connexions des utilisateurs, vous ne pourriez toujours pas garantir que vous détectez correctement un deuxième onglet. Par exemple, j'ai une fenêtre ouverte, puis je la ferme. J'ouvre alors une nouvelle fenêtre. Vous détecteriez probablement cela comme un deuxième onglet, même si j'ai déjà fermé le premier. Maintenant, votre utilisateur ne peut pas accéder à la première fenêtre parce qu'il l'a fermée, et il ne peut pas accéder à la deuxième fenêtre parce que vous le lui refusez.

En fait, le système en ligne de ma banque s'efforce vraiment de faire le numéro 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.

Answer 2

Vous ne pouvez pas empêcher l'utilisateur de rafraîchir ses données, et vous ne devriez pas essayer de le faire. Vous devriez revenir à pourquoi vous avez besoin de cette solution, quel est le problème principal ? Commencez par là et trouvez une autre façon de résoudre le problème. Peut-être que si vous expliquiez plus en détail pourquoi vous pensez que vous devez faire cela, cela aiderait à trouver une telle solution.

Casser les fonctionnalités fondamentales d'un navigateur n'est jamais une bonne idée, plus de 99,999999999% de l'internet fonctionne et s'actualise avec F5, il s'agit donc d'un problème de sécurité. attente de l'utilisateur, qu'il ne faut pas rompre.

Answer 3

Bien que ce ne soit pas une bonne idée de désactiver la touche 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 vous aidera !

Answer 4

À l'époque de la CGI, nous avions de nombreux formulaires qui déclenchaient diverses actions en arrière-plan. Par exemple, des notifications textuelles à des groupes, des travaux d'impression, l'extraction de données, etc.

Si l'utilisateur se trouve sur une page qui dit "Veuillez patienter...". Exécution d'un travail énorme qui peut prendre un certain temps". Il serait plus enclin à appuyer sur REFRESH et ce serait MAUVAIS !

POURQUOI ? Parce que cela déclencherait davantage d'emplois lents et finirait par enliser l'ensemble.

La solution ? Leur permettre de faire leur formulaire. Lorsqu'ils soumettent leur formulaire... Commencez votre travail, puis dirigez-les vers une autre page qui leur demande d'attendre.

La page du milieu contenait en fait les données du formulaire nécessaires pour lancer le travail. La page d'attente contient cependant un historique détruit en javascript. Ils peuvent donc RELOADER cette page d'attente autant qu'ils veulent et cela ne déclenchera jamais le démarrage du travail original en arrière-plan, car cette page d'attente ne contient que les données du formulaire nécessaires à l'attente elle-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 BACK et de rafraîchir ensuite.

Le système a été très transparent et a fonctionné à merveille pendant de NOMBREUSES années, jusqu'à ce que l'organisation à but non lucratif soit liquidée.

Exemple : FORMULAIRE D'ENTRÉE - Recueillez toutes les informations nécessaires et, une fois le formulaire soumis, déclenchez votre travail en arrière-plan.

RESPONSE from form entry - Renvoie un code HTML qui effectue une redirection vers votre page d'attente statique et/ou POST/GET vers un autre formulaire (la page d'attente).

PAGE D'ATTENTE - Contient uniquement des données de FORMULAIRE relatives à la page d'attente ainsi que du javascript pour détruire l'historique le plus récent. Comme (-1 OU -2) pour ne détruire que les pages les plus récentes, tout en permettant de revenir à la page d'entrée du formulaire d'origine.

Une fois qu'ils sont sur votre page d'attente, ils peuvent cliquer sur REFRESH autant qu'ils le souhaitent et cela n'engendrera jamais le travail FORM original sur le backend. Au lieu de cela, votre page d'attente devrait intégrer un rafraîchissement META temporisé afin de pouvoir toujours vérifier l'état de leur travail. Lorsque leur travail est terminé, ils sont redirigés hors de la page d'attente vers l'endroit de leur choix.

S'ils procèdent à un RAFRAICHISSEMENT manuel... Ils ajoutent simplement une vérification supplémentaire de leur statut professionnel.

J'espère que cela vous aidera. Je vous souhaite bonne chance.

Answer 5

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 de rafraîchissement à partir de JS, et même si c'était le cas, JS peut être désactivé.

Vous devriez probablement prendre du recul par rapport à votre X (empêcher le rafraîchissement) et trouver une solution différente au Y (quel qu'il soit).