Ah, der Zurück-Knopf. Sie können sich vorstellen, dass "zurück" ein JavaScript-Ereignis auslöst, das Sie einfach wie folgt abbrechen können:
document.onHistoryGo = function() { return false; }
Nein so. Es gibt einfach kein solches Ereignis.
Wenn Sie wirklich eine Web-App haben (im Gegensatz zu nur einer Website mit einigen Ajaxy-Funktionen), ist es sinnvoll, die Schaltfläche "Zurück" zu übernehmen (mit Fragmenten in der URL, wie Sie bereits erwähnt haben). Google Mail macht das. Ich spreche davon, wenn Ihre Web-App auf einer Seite in sich geschlossen ist.
Die Technik ist einfach: Wenn der Benutzer Maßnahmen ergreift, mit denen Änderungen vorgenommen werden, leiten Sie zu derselben URL weiter, auf der Sie sich bereits befinden, jedoch mit einem anderen Hash-Fragment. Z.B
window.location.hash = "#deleted_something";
...
window.location.hash = "#did_something_else";
Wenn der Gesamtstatus Ihrer Web-App hashbar ist, ist dies ein großartiger Ort, um einen Hash zu verwenden. Angenommen, Sie haben eine Liste mit E-Mails, verketten möglicherweise alle ihre IDs und lesen / ungelesenen Status und verwenden einen MD5-Hash, der als Fragmentkennung verwendet wird.
Diese Art der Umleitung (nur Hash) versucht nicht, etwas vom Server abzurufen, fügt jedoch einen Slot in die Verlaufsliste des Browsers ein. Im obigen Beispiel drückt der Benutzer auf "Zurück" und zeigt nun #deleted_something in der Adressleiste an. Sie schlagen wieder zurück und sind immer noch auf Ihrer Seite, aber ohne Hash. Dann wieder zurück und sie gehen tatsächlich zurück, wohin sie auch kommen.
Jetzt ist es jedoch schwierig, Ihr JavaScript erkennen zu lassen, wenn der Benutzer zurückschlägt (damit Sie den Status wiederherstellen können). Sie müssen lediglich die Position des Fensters beobachten und sehen, wann es sich ändert. Mit Abfrage. (Ich weiß, igitt, Umfrage. Nun, es gibt momentan nichts Besseres für einen Cross-Browser). Sie können jedoch nicht erkennen, ob sie vorwärts oder rückwärts gegangen sind, daher müssen Sie mit Ihren Hash-IDs kreativ werden. (Vielleicht ein mit einer Sequenznummer verketteter Hash ...)
Dies ist der Kern des Codes. (So funktioniert auch das jQuery History-Plugin.)
var hash = window.location.hash;
setInterval(function(){
if (window.location.hash != hash) {
hash = window.location.hash;
alert("User went back or forward to application state represented by " + hash);
}
}, 100);
Ich schätze die Erklärung in der Antwort von darkporter sehr , aber ich denke, dass sie durch die Verwendung eines " Hashchange " -Ereignisses verbessert werden kann . Wie darkporter erklärt hat, möchten Sie sicherstellen, dass alle Ihre Schaltflächen den Wert von window.location.hash ändern.
<button>
Elemente zu verwenden und ihnen dann Ereignisse zuzuweisen, die dann festgelegt werdenwindow.location.hash = "#!somehashstring";
.<a href="#!somehashstring">Button 1</a>
. Der Hash wird automatisch aktualisiert, wenn auf diese Links geklickt wird.Der Grund, warum ich nach dem Hash-Zeichen ein Ausrufezeichen habe, besteht darin, das "Hashbang" -Paradigma von Google zu erfüllen ( lesen Sie mehr darüber ). Dies ist nützlich, wenn Sie von Suchmaschinen indiziert werden möchten. Ihre Hash-Zeichenfolge besteht normalerweise aus Name / Wert-Paaren
#!color=blue&shape=triangle
oder einer Liste wie#!/blue/triangle
- was auch immer für Ihre Web-App sinnvoll ist.Dann müssen Sie nur noch diesen Code hinzufügen, der ausgelöst wird, wenn sich der Hash-Wert ändert (auch wenn die Zurück-Taste gedrückt wird ). Es scheint keine Abfrageschleife erforderlich zu sein.
window.addEventListener("hashchange", function(){ console.log("Hash changed to", window.location.hash); // .... Do your thing here... });
Ich habe nur in Chrome 36 getestet, aber laut caniuse.com sollte dies in IE8 +, FF21 +, Chrome21 + und den meisten anderen Browsern außer Opera Mini verfügbar sein.
quelle
Es ist sehr einfach, die Schaltfläche ZURÜCK des Browsers zu deaktivieren , wie im folgenden JQuery-Code:
// History API if( window.history && window.history.pushState ){ history.pushState( "nohb", null, "" ); $(window).on( "popstate", function(event){ if( !event.originalEvent.state ){ history.pushState( "nohb", null, "" ); return; } }); }
Sie können sehen, dass es funktioniert und weitere Beispiele hier dotnsf und hier thecssninja
Vielen Dank !
quelle
Ich habe einen Weg gefunden, um das normale Verlaufsverhalten zu überschreiben und mithilfe der HTML5-Verlaufs-API eindeutige
back
undforward
Schaltflächenereignisse zu erstellen (dies funktioniert in IE 9 nicht). Dies ist sehr hackig, aber effektiv, wenn Sie die Ereignisse der Schaltflächen "Zurück" und "Vorwärts" abfangen und behandeln möchten, wie Sie möchten. Dies kann in einer Reihe von Szenarien hilfreich sein, z. B. wenn Sie ein Remotedesktopfenster anzeigen und die Schaltflächenklicks auf dem Remotecomputer reproduzieren müssen.Folgendes würde das Verhalten der Schaltflächen "Zurück" und "Vorwärts" überschreiben:
var myHistoryOverride = new HistoryButtonOverride(function() { console.log("Back Button Pressed"); return true; }, function() { console.log("Forward Button Pressed"); return true; });
Wenn Sie in einer dieser Rückruffunktionen false zurückgegeben haben, können Sie dem Browser erlauben, mit einem normalen Vorwärts- / Rückwärtsvorgang fortzufahren und Ihre Seite zu verlassen.
Hier ist das vollständige Skript erforderlich:
function HistoryButtonOverride(BackButtonPressed, ForwardButtonPressed) { var Reset = function () { if (history.state == null) return; if (history.state.customHistoryStage == 1) history.forward(); else if (history.state.customHistoryStage == 3) history.back(); } var BuildURLWithHash = function () { // The URLs of our 3 history states must have hash strings in them so that back and forward events never cause a page reload. return location.origin + location.pathname + location.search + (location.hash && location.hash.length > 1 ? location.hash : "#"); } if (history.state == null) { // This is the first page load. Inject new history states to help identify back/forward button presses. var initialHistoryLength = history.length; history.replaceState({ customHistoryStage: 1, initialHistoryLength: initialHistoryLength }, "", BuildURLWithHash()); history.pushState({ customHistoryStage: 2, initialHistoryLength: initialHistoryLength }, "", BuildURLWithHash()); history.pushState({ customHistoryStage: 3, initialHistoryLength: initialHistoryLength }, "", BuildURLWithHash()); history.back(); } else if (history.state.customHistoryStage == 1) history.forward(); else if (history.state.customHistoryStage == 3) history.back(); $(window).bind("popstate", function () { // Called when history navigation occurs. if (history.state == null) return; if (history.state.customHistoryStage == 1) { if (typeof BackButtonPressed == "function" && BackButtonPressed()) { Reset(); return; } if (history.state.initialHistoryLength > 1) history.back(); // There is back-history to go to. else history.forward(); // No back-history to go to, so undo the back operation. } else if (history.state.customHistoryStage == 3) { if (typeof ForwardButtonPressed == "function" && ForwardButtonPressed()) { Reset(); return; } if (history.length > history.state.initialHistoryLength + 2) history.forward(); // There is forward-history to go to. else history.back(); // No forward-history to go to, so undo the forward operation. } }); };
Dies funktioniert nach einem einfachen Konzept. Wenn unsere Seite geladen wird, erstellen wir 3 verschiedene Verlaufszustände (nummeriert 1, 2 und 3) und navigieren den Browser zu Zustand Nr. 2. Da sich Zustand 2 in der Mitte befindet, versetzt uns das nächste Verlaufsnavigationsereignis entweder in den Zustand 1 oder 3, und daraus können wir bestimmen, in welche Richtung der Benutzer gedrückt hat. Und einfach so haben wir ein Zurück- oder Vorwärts-Schaltflächenereignis abgefangen. Wir behandeln es dann, wie wir wollen, und kehren zu Status 2 zurück, damit wir das nächste Navigationsereignis für den Verlauf erfassen können.
Natürlich müssten Sie bei der Verwendung des HistoryButtonOverride-Skripts auf die Verwendung der Methoden history.replaceState und history.pushState verzichten, da Sie sie sonst beschädigen würden.
quelle
Aus Datenschutzgründen ist es unmöglich, die Zurück-Schaltfläche zu deaktivieren oder den Benutzerverlauf zu überprüfen. Es ist jedoch möglich, neue Einträge in diesem Verlauf zu erstellen, ohne die Seiten zu ändern. Wenn Ihre AJAX-Anwendung den Status ändert, aktualisieren Sie sie
top.location
mit einem neuen URI-Fragment .top.location = "#new-application-state";
Dadurch wird ein neuer Eintrag im Verlaufsstapel des Browsers erstellt. Einige AJAX-Bibliotheken verarbeiten bereits alle langweiligen Details, z. B. Really Simple History .
quelle
setTimeout()
Beispiels in darkporter.Ich mache so etwas. Ich behalte ein Array mit früheren App-Status.
Initiiert als:
var backstack = [];
Dann höre ich auf Änderungen im Location-Hash und wenn es sich ändert, mache ich Folgendes:
if (backstack.length > 1 && backstack[backstack.length - 2] == newHash) { // Back button was probably pressed backstack.pop(); } else backstack.push(newHash);
Auf diese Weise habe ich eine etwas einfache Möglichkeit, den Benutzerverlauf zu verfolgen. Wenn ich nun einen Zurück-Button in der App implementieren möchte (nicht den Browser-Botton), lasse ich es einfach tun:
window.location.hash = backstack.pop();
quelle
In meiner Situation wollte ich verhindern, dass die Schaltfläche "Zurück" den Benutzer zur letzten Seite sendet, und stattdessen eine andere Aktion ausführen. Mit der
hashchange
Veranstaltung habe ich eine Lösung gefunden, die für mich funktioniert hat. Dieses Skript setzt voraus, dass die Seite, auf der Sie es verwenden, noch keinen Hash verwendet, wie in meinem Fall:var hashChangedCount = -2; $(window).on("hashchange", function () { hashChangedCount++; if (top.location.hash == "#main" && hashChangedCount > 0) { console.log("Ah ah ah! You didn't say the magic word!"); } top.location.hash = '#main'; }); top.location.hash = "#";
Das Problem, das ich mit einigen der anderen Antworten hatte, ist, dass das
hashchange
Ereignis nicht ausgelöst werden würde. Abhängig von Ihrer Situation kann dies auch für Sie funktionieren.quelle
Die Zurück-Schaltfläche in den Browsern versucht normalerweise, zur vorherigen Adresse zurückzukehren. In Browser-Javascript gibt es kein Ereignis, bei dem die Zurück-Taste des nativen Geräts gedrückt wurde. Sie können es jedoch hacken, indem Sie mit Standort und Hash spielen, um Ihren App-Status zu ändern.
Stellen Sie sich die einfache App mit zwei Ansichten vor:
Folgen Sie zur Implementierung diesem Beispielcode:
function goToView (viewName) { // before you want to change the view, you have to change window.location.hash. // it allows you to go back to the previous view with the back button. // so use this function to change your view instead of directly do the job. // page parameter is your key to understand what view must be load after this. window.location.hash = page } function loadView (viewName) { // change dom here based on viewName, for example: switch (viewName) { case 'index': document.getElementById('result').style.display = 'none' document.getElementById('index').style.display = 'block' break case 'result': document.getElementById('index').style.display = 'none' document.getElementById('result').style.display = 'block' break default: document.write('404') } } window.addEventListener('hashchange', (event) => { // oh, the hash is changed! it means we should do our job. const viewName = window.location.hash.replace('#', '') || 'index' // load that view loadView(viewName) }) // load requested view at start. if (!window.location.hash) { // go to default view if there is no request. goToView('index') } else { // load requested view. loadView(window.location.hash.replace('#', '')) }
quelle