webentwicklung-frage-antwort-db.com.de

Verhindern Sie jegliche Form der Seitenaktualisierung mit jQuery / Javascript

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

  1. Jederzeit trifft der Benutzer F5 oder aktualisieren Sie die Schaltfläche oben. Er sollte einen Warnhinweis bekommen

    Sie können die Seite nicht aktualisieren.

  2. Auch wenn der Benutzer eine neue Registerkarte öffnet und versucht, auf dieselbe URL in der vorherigen Registerkarte zuzugreifen, sollte er eine Warnung erhalten

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

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

74
pankaj

# 1 kann über window.onbeforeunload implementiert werden. 

Zum Beispiel: 

<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 auf seinem Weg fortzufahren. Dies wird immer häufiger. Stack Overflow führt dies aus, wenn Sie versuchen, sich während der Eingabe eines Beitrags von einer Seite wegzubewegen. Sie können den Benutzer nicht vollständig daran hindern, neu zu laden, aber Sie können es wirklich beängstigend klingen, wenn er das tut. 

# 2 ist mehr oder weniger unmöglich. Selbst wenn Sie Sitzungen und Benutzeranmeldungen verfolgt haben, können Sie immer noch nicht garantieren, dass Sie eine zweite Registerkarte richtig erkannt haben. Zum Beispiel habe ich vielleicht ein Fenster offen und schließe es dann. Nun ö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 versucht das Online-System meiner Bank wirklich, Nr. 2 zu tun, 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. 

156
Seth

Sie können den Benutzer nicht an der Aktualisierung hindern, noch sollten Sie es wirklich versuchen. Sie sollten zu warum zurückkehren. Sie benötigen diese Lösung. Was ist das Hauptproblem hier? Beginnen Sie dort und finden Sie einen anderen Weg, um das Problem zu lösen. Vielleicht haben Sie dargelegt, warum Sie glauben, dass Sie dies tun müssen, um eine solche Lösung zu finden.

Das Durchbrechen grundlegender Browserfunktionen ist nie eine gute Idee. Über 99,999999999% des Internets funktioniert und wird mit F5 aktualisiert. Dies ist ein Erwartung des Benutzers, das Sie nicht brechen sollten.

28
Nick Craver

Obwohl es keine gute Idee ist, die Taste F5 zu deaktivieren, können Sie dies in JQuery wie unten beschrieben 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!

12
Nilesh

In den alten Tagen von CGI hatten wir viele Formen, die verschiedene Backend-Aktionen auslösen würden. Wie Textnachrichten an Gruppen, Druckaufträge, Datenaufbereitung usw.

Wenn sich der Benutzer auf einer Seite befand, auf der stand "Bitte warten Sie ... Einen riesigen Job ausführen, der einige Zeit in Anspruch nehmen kann." Sie würden eher REFRESH treffen und dies wäre schlecht!

WARUM? Denn es würde langsamere Jobs auslösen und letztendlich die ganze Sache ruinieren.

Die Lösung? Erlauben Sie ihnen, ihr Formular auszufüllen . Wenn sie ihr Formular absenden ... Starten Sie Ihren Job und leiten Sie sie auf eine andere Seite, auf der sie warten sollen.

Wobei 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 Javascript-Historie. So können sie diese Warteseite nach Belieben RELOADEN, und der ursprüngliche Job wird niemals im Hintergrund gestartet, da diese WAIT-Seite nur die für das WAIT selbst erforderlichen Formulardaten enthält.

Hoffe das macht Sinn.

Die Funktion zum Zerstören des Verlaufs hinderte sie auch daran, auf ZURÜCK zu klicken und sie ebenfalls zu aktualisieren.

Es war sehr nahtlos und hat für VIELE VIELE Jahre großartig funktioniert, bis die gemeinnützige Organisation abgebaut wurde.

Beispiel: FORM-EINTRAG - Sammeln Sie alle Informationen, und wenn Sie diese abschicken, wird Ihr Back-End-Job ausgelöst.

RESPONSE from form entry - Gibt HTML zurück, das eine Weiterleitung zu Ihrer statischen Warteseite und/oder POST/GET zu einem anderen Formular (der WAIT-Seite) durchführt. 

WARTENSEITE - Enthält nur FORM-Daten, die sich auf die Warteseite beziehen, sowie Javascript, um den neuesten Verlauf zu löschen. Wie (-1 OR -2), um nur die neuesten Seiten zu löschen, aber immer noch zur ursprünglichen FORM-Einstiegsseite zurückzukehren.

Sobald sie sich auf Ihrer WAIT-Seite befinden, können Sie so oft auf REFRESH klicken, wie sie möchten, und es wird nie der ursprüngliche FORM-Job im Backend erzeugt. Stattdessen sollte Ihre WAIT-Seite eine zeitgesteuerte META-Aktualisierung enthalten, damit sie immer den Status ihres Jobs überprüfen kann. Wenn der Job abgeschlossen ist, werden sie von der Warteseite an die gewünschte Stelle umgeleitet.

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

Hoffentlich hilft das. Viel Glück.

10
Todd

Nein, das 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 ist, kann JS deaktiviert werden.

Sie sollten wahrscheinlich von Ihrem X zurücktreten (das Aktualisieren verhindern) und eine andere Lösung für Y finden (was auch immer das ist).

6
Quentin

Nummer (2) ist möglich, indem eine Socketimplementierung (z. B. websocket, socket.io usw.) mit einem benutzerdefinierten Herzschlag für jede Sitzung verwendet wird, in der der Benutzer tätig 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 antworten Sie dann mit einer Fehlermeldung.

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

1
seo

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

Im Moment 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);
0
RockLegend