Empêcher toute forme d'actualisation de la page à l'aide de jQuery / Javascript
Une fois que l'utilisateur est sur ma page, je ne veux pas qu'il actualise la page.
À tout moment, l'utilisateur clique F5 ou actualiser le bouton sur le dessus. Il devrait recevoir une alerte disant
Vous ne pouvez pas actualiser la page.
De plus, 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
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 recevra le message et une option lui permettra de rester sur la page ou de continuer son chemin. Cela devient plus commun. Si vous essayez de vous écarter d'une page pendant que vous tapez un message, Stflow Overflow le fait. Vous ne pouvez pas empêcher complètement l'utilisateur de recharger, mais vous pouvez lui donner un air vraiment effrayant s'ils le font.
# 2 est plus ou moins impossible. Même si vous avez suivi les sessions et les connexions des utilisateurs, vous ne pourrez toujours pas garantir que vous avez correctement détecté un deuxième onglet. Par exemple, j'ai peut-être une fenêtre ouverte, puis la ferme. Maintenant j'ouvre 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 les refusez.
En fait, le système en ligne de ma banque fait de son mieux pour ce faire n ° 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 le système bancaire à nouveau.
Vous ne pouvez pas empêcher l'utilisateur d'actualiser, vous ne devriez pas vraiment essayer. Vous devriez revenir à pourquoi vous avez besoin de cette solution, quel est le problème fondamental ici ?. Commencez par là et trouvez un autre moyen de résoudre le problème. Peut-être expliquez-vous pourquoi vous pensez avoir besoin de le faire, cela aiderait à trouver une telle solution.
Casser les fonctionnalités fondamentales du navigateur n’est jamais une bonne idée. Plus de 99,999,999999% du réseau Internet fonctionne et est actualisé avec la version F5, c’est une attente de l’utilisateur, une opportunité à ne pas interrompre.
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 pouvant déclencher diverses actions en arrière-plan. Telles que les notifications textuelles aux groupes, les travaux d'impression, la gestion de données, etc.
Si l'utilisateur était sur une page qui disait "S'il vous plaît attendez ... Effectuer 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 emplois plus lents et finirait par embourber le tout.
La solution? Autorisez-les à remplir leur formulaire .. Lorsqu'ils soumettent leur formulaire ... Commencez votre travail, puis dirigez-les vers une autre page qui leur dit d'attendre.
Où la page au milieu contenait réellement les données de formulaire nécessaires au démarrage du travail . La page WAIT contient cependant un historique javascript détruit. Ainsi, ils peuvent RELOADER cette page d'attente à leur guise et le travail d'origine ne démarrera jamais en arrière-plan, car cette page WAIT contient uniquement les données de formulaire nécessaires à WAIT.
J'espère que cela a du sens.
La fonction de destruction de l'historique les empêchait également de cliquer sur RETOUR, puis de rafraîchir.
C'était très homogène et a très bien fonctionné pendant BEAUCOUP D'ANNÉES jusqu'à ce que le but non lucratif soit réduit à néant.
Exemple: ENTRÉE DE FORMULAIRE - Collecte toutes leurs informations et, une fois soumises, cela déclenche votre travail d’arrière-plan.
RESPONSE from entry entry - Renvoie le 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 (PAGE D'ATTENTE) - Contient uniquement les données FORM relatives à la page d'attente ainsi que le javascript permettant de détruire l'historique le plus récent. Comme (-1 OR -2) pour ne détruire que les pages les plus récentes, tout en leur permettant de revenir à la page de saisie du formulaire d'origine.
Une fois qu'ils se trouvent sur votre page WAIT, ils peuvent cliquer sur REFRESH autant de fois qu'ils le souhaitent et le travail FORM initial ne sera jamais créé sur le backend. Au lieu de cela, votre page WAIT devrait inclure une actualisation programmée META afin de pouvoir toujours vérifier le statut de leur travail. Une fois leur travail terminé, ils sont redirigés de la page d’attente où vous le souhaitez.
S'ils le font manuellement, ils ajoutent simplement une vérification supplémentaire de leur statut d'emploi.
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 reculer de votre X (pour éviter le rafraîchissement) et trouver une solution différente de Y (peu importe ce que cela pourrait être).
Number (2) est possible en utilisant une implémentation de socket (comme websocket, socket.io, etc.) avec un battement de coeur personnalisé pour chaque session dans laquelle l'utilisateur est engagé. Si un utilisateur tente d'ouvrir une autre fenêtre, vous devez vérifier le gestionnaire javascript. avec le serveur si ça va, puis répond avec un message d'erreur.
Cependant, une meilleure solution consiste à synchroniser les deux sessions si possible, comme dans Google Documents.
Le problème n ° 2 peut maintenant être résolu avec 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);