Verhindern Sie jede Form der Seitenaktualisierung mit jQuery / Javascript

Sobald der Benutzer auf meiner Seite ist, möchte ich nicht, dass er die Seite aktualisiert.

1. Der Benutzer F5drückt jederzeit auf die Schaltfläche "Aktualisieren" oder "Aktualisieren". Er sollte einen Alarm erhalten

   Sie können die Seite nicht aktualisieren.

2. Auch wenn der Benutzer einen neuen Tab öffnet und versucht, auf dieselbe URL im vorherigen Tab zuzugreifen, sollte er eine Warnung erhalten

   Sie können dieselbe Seite nicht in zwei Registerkarten öffnen

Wie auch immer, ich kann dies mit JavaScript oder jQuery tun? Punkt eins ist wirklich wichtig.

# 1 kann über implementiert werden window.onbeforeunload.

Beispielsweise:

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

Der Benutzer wird mit der Nachricht aufgefordert und erhält die Option, auf der Seite zu bleiben oder seinen Weg fortzusetzen. Dies wird immer häufiger. Der Stapelüberlauf führt dies aus, wenn Sie versuchen, während der Eingabe eines Beitrags von einer Seite weg zu navigieren. Sie können den Benutzer nicht vollständig vom erneuten Laden abhalten, aber Sie können es wirklich beängstigend klingen lassen, wenn dies der Fall ist.

# 2 ist mehr oder weniger unmöglich. Selbst wenn Sie Sitzungen und Benutzeranmeldungen nachverfolgen würden, könnten Sie nicht garantieren, dass Sie eine zweite Registerkarte korrekt erkannt haben. Zum Beispiel habe ich vielleicht ein Fenster geöffnet und dann geschlossen. Jetzt öffne ich ein neues Fenster. Sie würden das wahrscheinlich als zweiten Tab erkennen, obwohl ich den ersten bereits geschlossen habe. Jetzt kann Ihr Benutzer nicht auf das erste Fenster zugreifen, weil er es geschlossen hat, und er kann nicht auf das zweite Fenster zugreifen, weil Sie es ablehnen.

Tatsächlich ist das Online-System meiner Bank sehr bemüht, Nummer 2 zu erreichen, und die oben beschriebene Situation tritt ständig auf. Normalerweise muss ich warten, bis die serverseitige Sitzung abläuft, bevor ich das Bankensystem wieder verwenden kann.

Sie können nicht verhindern, dass der Benutzer aktualisiert wird, und Sie sollten es auch nicht wirklich versuchen. Sie sollten zurückgehen, warum Sie diese Lösung benötigen. Was ist das Hauptproblem hier?. Beginnen Sie dort und finden Sie einen anderen Weg, um das Problem zu lösen. Vielleicht haben Sie herausgefunden, warum Sie glauben, dass Sie dies tun müssen, um eine solche Lösung zu finden.

Grundlegende Browserfunktionen zu brechen ist niemals eine gute Idee. Über 99,999999999% des Internets funktionieren und werden mit F5 aktualisiert. Dies ist eine Erwartung des Benutzers, die Sie nicht brechen sollten.

Obwohl es keine gute Idee ist, die F5-Taste zu deaktivieren, können Sie dies in JQuery wie folgt tun.

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

Hoffe das wird helfen!

In den alten Tagen von CGI hatten wir viele Formen, die verschiedene Backend-Aktionen auslösten. Wie Textbenachrichtigungen an Gruppen, Druckaufträge, Datenerfassung usw.

Wenn sich der Benutzer auf einer Seite befand, auf der stand: "Bitte warten Sie ... Führen Sie einen RIESIGEN Job aus, der einige Zeit dauern kann." Sie würden eher REFRESH treffen und das wäre SCHLECHT!

WARUM? Weil es langsamere Jobs auslösen und schließlich das Ganze zum Erliegen bringen würde.

Die Lösung? Erlaube ihnen, ihre Form zu machen. Wenn sie ihr Formular abschicken ... Starten Sie Ihren Job und leiten Sie sie auf eine andere Seite weiter, auf der sie aufgefordert werden, zu warten.

Wo die Seite in der Mitte tatsächlich die Formulardaten enthielt, die zum Starten des Jobs benötigt wurden. Die WAIT-Seite enthält jedoch eine Zerstörung des Javascript-Verlaufs. Sie können diese Warteseite also nach Belieben neu laden, und der ursprüngliche Job wird niemals im Hintergrund gestartet, da diese WAIT-Seite nur die Formulardaten enthält, die für WAIT selbst erforderlich sind.

Hoffe das macht Sinn.

Die Funktion zum Zerstören des Verlaufs verhinderte auch, dass sie auf ZURÜCK klicken und dann ebenfalls aktualisieren konnten.

Es war sehr nahtlos und funktionierte viele Jahre lang großartig, bis der gemeinnützige Verein aufgelöst wurde.

Beispiel: FORMULAREINGABE - Sammeln Sie alle Informationen. Wenn diese gesendet werden, wird Ihr Backend-Job ausgelöst.

ANTWORT vom Formulareintrag - Gibt HTML zurück, das eine Umleitung zu Ihrer statischen Warteseite und / oder POST / GET zu einem anderen Formular (der WAIT-Seite) durchführt.

WARTESEITE - Enthält nur FORM-Daten zur Warteseite sowie Javascript, um den neuesten Verlauf zu zerstören. Wie (-1 ODER -2), um nur die neuesten Seiten zu zerstören, aber sie können trotzdem zu ihrer ursprünglichen FORMULAR-Eintragsseite zurückkehren.

Sobald sie sich auf Ihrer WAIT-Seite befinden, können sie so oft auf REFRESH klicken, wie sie möchten, und es wird niemals der ursprüngliche FORM-Job im Backend erzeugt. Stattdessen sollte Ihre WAIT-Seite eine zeitgesteuerte META-Aktualisierung selbst enthalten, damit sie immer den Status ihres Jobs überprüfen kann. Wenn ihr Auftrag abgeschlossen ist, werden sie von der Warteseite zu einem beliebigen Ort weitergeleitet.

Wenn sie manuell REFRESHEN ... Sie fügen dort einfach eine weitere Überprüfung ihres Jobstatus hinzu.

Hoffentlich hilft das. Viel Glück.

Nein, gibt es nicht.

Ich bin mir ziemlich sicher, dass es keine Möglichkeit gibt, einen Klick auf die Aktualisierungsschaltfläche von JS abzufangen, und selbst wenn dies der Fall war, kann JS deaktiviert werden.

Sie sollten wahrscheinlich von Ihrem X zurücktreten (um ein Aktualisieren zu verhindern) und eine andere Lösung als Y finden (was auch immer das sein mag).

Nummer (2) ist möglich, indem eine Socket-Implementierung (wie websocket, socket.io usw.) mit einem benutzerdefinierten Heartbeat für jede Sitzung verwendet wird, an der der Benutzer beteiligt ist. Wenn ein Benutzer versucht, ein anderes Fenster zu öffnen, wird eine JavaScript-Handlerprüfung durchgeführt mit dem Server, wenn es in Ordnung ist, und dann mit einer Fehlermeldung antworten.

Eine bessere Lösung besteht jedoch darin, die beiden Sitzungen nach Möglichkeit wie in Google Docs zu synchronisieren.

Problem Nr. 2 kann jetzt mit BroadcastAPI gelöst werden .

Derzeit ist es nur in Chrome, Firefox und Opera verfügbar.

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