So überprüfen Sie, ob der Benutzer in den Browserverlauf zurückkehren kann oder nicht

Ich möchte mit JavaScript sehen, ob es einen Verlauf gibt oder nicht. Ich meine, ob die Schaltfläche "Zurück" im Browser verfügbar ist oder nicht.

Kurze Antwort: Das kannst du nicht.

Technisch gibt es einen genauen Weg, der die Eigenschaft überprüfen würde:

history.previous

Es wird jedoch nicht funktionieren. Das Problem dabei ist, dass dies in den meisten Browsern als Sicherheitsverletzung angesehen wird und normalerweise nur undefiniert zurückgegeben wird .

history.length

Ist eine Eigenschaft, die andere vorgeschlagen haben ...
Die Länge funktioniert jedoch nicht vollständig, da sie nicht angibt, wo Sie sich im Verlauf befinden. Außerdem beginnt es nicht immer mit derselben Nummer. Ein Browser, für den beispielsweise keine Zielseite festgelegt ist, beginnt bei 0, während ein anderer Browser, der eine Zielseite verwendet, bei 1 startet.

Meistens wird ein Link hinzugefügt, der Folgendes aufruft:

history.back();

oder

 history.go(-1);

und es wird nur erwartet, dass, wenn Sie nicht zurückgehen können, das Klicken auf den Link nichts bewirkt.

Es gibt eine andere Möglichkeit zu überprüfen - überprüfen Sie den Referrer. Die erste Seite hat normalerweise einen leeren Referrer ...

if (document.referrer == "") {
    window.close()
} else {
    history.back()
}

Mein Code ließ den Browser eine Seite zurückgehen, und wenn dies fehlschlägt, wird eine Fallback-URL geladen. Es erkennt auch Änderungen an Hashtags.

Wenn die Schaltfläche "Zurück" nicht verfügbar war, wird die Fallback-URL nach 500 ms geladen, sodass der Browser genügend Zeit hat, um die vorherige Seite zu laden. Das Laden der Fallback-URL direkt danach window.history.go(-1);würde dazu führen, dass der Browser die Fallback-URL verwendet, da das js-Skript noch nicht gestoppt wurde.

function historyBackWFallback(fallbackUrl) {
    fallbackUrl = fallbackUrl || '/';
    var prevPage = window.location.href;

    window.history.go(-1);

    setTimeout(function(){ 
        if (window.location.href == prevPage) {
            window.location.href = fallbackUrl; 
        }
    }, 500);
}

Hier ist, wie ich es gemacht habe.

Ich habe das Ereignis 'beforeunload' verwendet , um einen Booleschen Wert festzulegen . Dann habe ich eine Zeitüberschreitung festgelegt, um zu beobachten, ob die Vorabladung ausgelöst wurde.

var $window = $(window),
    $trigger = $('.select_your_link'),
    fallback = 'your_fallback_url';
    hasHistory = false;

$window.on('beforeunload', function(){
    hasHistory = true;
});

$trigger.on('click', function(){

    window.history.go(-1);

    setTimeout(function(){
        if (!hasHistory){
            window.location.href = fallback;
        }
    }, 200);

    return false;
});

Scheint in gängigen Browsern zu funktionieren (bisher FF, Chrome, IE11 getestet).

Es gibt einen Ausschnitt, den ich in meinen Projekten verwende:

function back(url) {
    if (history.length > 2) {
        // if history is not empty, go back:
        window.History.back();
    } else if (url) {
        // go to specified fallback url:
        window.History.replaceState(null, null, url);
    } else {
        // go home:
        window.History.replaceState(null, null, '/');
    }
}

Zu Ihrer Information: Ich verwende History.js , um den Browserverlauf zu verwalten.

Warum sollte man history.length mit Nummer 2 vergleichen?

Weil die Startseite von Chrome als erstes Element im Browserverlauf gezählt wird.

Es gibt nur wenige Möglichkeiten history.lengthund das Verhalten des Benutzers:

• Der Benutzer öffnet eine neue leere Registerkarte im Browser und führt dann eine Seite aus.history.length = 2und wir möchten back()in diesem Fall deaktivieren , da der Benutzer zum leeren Tab wechselt.
• Der Benutzer öffnet die Seite in einem neuen Tab, indem er irgendwo zuvor auf einen Link klickt. history.length = 1und wieder wollen wir deaktivierenback() Methode .
• Und schließlich landet der Benutzer auf der aktuellen Seite, nachdem er einige Seiten neu geladen hat . history.length > 2und jetzt back()kann aktiviert werden.

Hinweis: Ich lasse den Fall aus, wenn der Benutzer auf der aktuellen Seite landet, nachdem er auf den Link von einer externen Website ohne geklickt hattarget="_blank" .

Hinweis 2: document.referrer ist leer, wenn Sie eine Website durch Eingabe ihrer Adresse öffnen und wenn die Website Ajax zum Laden von Unterseiten verwendet. Daher habe ich die Überprüfung dieses Werts im ersten Fall eingestellt.

das scheint den Trick zu tun:

function goBackOrClose() {  

    window.history.back();
    window.close(); 

    //or if you are not interested in closing the window, do something else here
    //e.g. 
    theBrowserCantGoBack();

}

Rufen Sie history.back () und dann window.close () auf. Wenn der Browser in den Verlauf zurückkehren kann, kann er nicht zur nächsten Anweisung gelangen. Wenn es nicht zurückkehren kann, wird das Fenster geschlossen.

Beachten Sie jedoch, dass Firefox dem Skript nicht erlaubt, das Fenster zu schließen, wenn die Seite durch Eingabe einer URL erreicht wurde.

Sie können nicht direkt überprüfen, ob die Zurück-Schaltfläche verwendet werden kann. Sie können sich das ansehen history.length>0, aber das gilt auch, wenn der aktuellen Seite Seiten voraus sind . Sie können nur dann sicher sein , dass die Zurück-Taste unbrauchbar ist, wenn history.length===0.

Wenn das nicht gut genug ist, können Sie nur anrufen history.back()und wenn Ihre Seite danach noch geladen wird, ist die Zurück-Schaltfläche nicht verfügbar! Das bedeutet natürlich, wenn die Zurück - Taste ist verfügbar, haben navigiert Sie gerade von der Seite entfernt. Sie dürfen die Navigation nicht abbrechen. onunloadAlles, was Sie tun können, um zu verhindern, dass das Zurück passiert, ist, etwas zurückzugeben onbeforeunload, was zu einer großen nervigen Eingabeaufforderung führt. Es lohnt sich nicht.

Tatsächlich ist es normalerweise eine wirklich schlechte Idee, irgendetwas mit der Geschichte zu tun. Die Verlaufsnavigation ist für Browser-Chrome und nicht für Webseiten. Das Hinzufügen von "Zurück" -Links führt normalerweise zu mehr Verwirrung bei den Benutzern, als es wert ist.

Seien Sie vorsichtig mit, window.history.lengthda es auch Einträge für enthältwindow.history.forward()

Sie haben also vielleicht window.history.lengthmehr als 1 Einträge, aber keine Einträge für den Verlauf zurück. Dies bedeutet, dass nichts passiert, wenn Sie schießenwindow.history.back()

history.lengthist nutzlos, da nicht angezeigt wird, ob der Benutzer in den Verlauf zurückkehren kann. Auch verschiedene Browser verwenden die Anfangswerte 0 oder 1 - dies hängt vom Browser ab.

Die funktionierende Lösung besteht darin, $(window).on('beforeunload'event zu verwenden , aber ich bin nicht sicher, ob es funktioniert, wenn die Seite über Ajax geladen wird und pushState verwendet, um den Fensterverlauf zu ändern.

Also habe ich die nächste Lösung verwendet:

var currentUrl = window.location.href;
window.history.back();
setTimeout(function(){
    // if location was not changed in 100 ms, then there is no history back
    if(currentUrl === window.location.href){
        // redirect to site root
        window.location.href = '/';
    }
}, 100);

Ich habe mir den folgenden Ansatz ausgedacht. Es verwendet das Ereignis onbeforeunload, um festzustellen, ob der Browser die Seite verlässt oder nicht. Wenn dies in einer bestimmten Zeitspanne nicht der Fall ist, wird nur zum Fallback umgeleitet.

var goBack = function goBack(fallback){
    var useFallback = true;

    window.addEventListener("beforeunload", function(){
      useFallback = false;
    });

    window.history.back();

    setTimeout(function(){
        if (useFallback){ window.location.href = fallback; }
    }, 100); 
}

Sie können diese Funktion mit aufrufen goBack("fallback.example.org").

Aufbauend auf der Antwort hier und hier . Ich denke, die schlüssigere Antwort ist nur zu überprüfen, ob dies eine neue Seite in einem neuen Tab ist.

Wenn der Verlauf der Seite mehr als eins umfasst, können wir zur Seite vor der aktuellen Seite zurückkehren. Wenn nicht, ist die Registerkarte eine neu geöffnete Registerkarte und wir müssen eine neue Registerkarte erstellen.

Anders als bei den verknüpften Antworten suchen wir nicht nach einem, referrerda ein neuer Tab immer noch einen Verweis hat.

if(1 < history.length) {
    history.back();
}
else {
    window.close();
}

Es gibt eine andere nahezu perfekte Lösung, die einer anderen SO-Antwort entnommen ist :

if( (1 < history.length) && document.referrer ) {
    history.back();
}
else {
    // If you can't go back in history, you could perhaps close the window ?
    window.close();
}

Jemand berichtete, dass es bei der Verwendung nicht funktioniert, target="_blank"aber es scheint für mich in Chrome zu funktionieren.

Der Browser verfügt über eine Vor- und Zurück-Schaltfläche. Ich habe eine Lösung für diese Frage gefunden. Dies wirkt sich jedoch auf die Weiterleitungsaktion des Browsers aus und führt bei einigen Browsern zu Fehlern.

Das funktioniert so: Wenn der Browser eine neue URL öffnet, die noch nie geöffnet wurde, wächst die history.length.

So können Sie Hash wie ändern

  location.href = '#__transfer__' + new Date().getTime() 

Um eine nie angezeigte URL zu erhalten, erhält history.length die wahre Länge.

  var realHistoryLength = history.length - 1

Aber es funktioniert nicht immer gut und ich weiß nicht warum, besonders wenn die URL automatisch automatisch springt.

Ich habe versucht, eine Lösung zu finden, und dies ist das Beste, was ich bekommen konnte (aber es funktioniert großartig und es ist die einfachste Lösung, die ich selbst hier gefunden habe).

In meinem Fall wollte ich mit einem Zurück-Button zum Verlauf zurückkehren, aber wenn die erste Seite, die der Benutzer öffnete, eine Unterseite meiner App war, würde sie zur Hauptseite zurückkehren.

Die Lösung war, sobald die App geladen ist, habe ich nur den Verlaufsstatus ersetzt:

history.replaceState( {root: true}, '', window.location.pathname + window.location.hash)

Auf diese Weise muss ich nur überprüfen, history.state.rootbevor ich zurückgehe. Wenn das stimmt, ersetze ich stattdessen eine Historie:

if(history.state && history.state.root)
    history.replaceState( {root: true}, '', '/')
else
    history.back() 

var fallbackUrl = "home.php";
if(history.back() === undefined)
    window.location.href = fallbackUrl;

Lösung

'use strict';
function previousPage() {
  if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
    window.history.back();
  }
}

Erklärung

window.location.pathnamegibt Ihnen den aktuellen URI. Zum Beispiel https://domain/question/1234/i-have-a-problemwird geben /question/1234/i-have-a-problem. Weitere Informationen finden Sie in der Dokumentation zu window.location .

Als nächstes split()gibt uns der Aufruf von alle Fragmente dieser URI. Wenn wir also unsere vorherige URI verwenden, haben wir so etwas wie ["", "question", "1234", "i-have-a-problem"]. Weitere Informationen finden Sie in der Dokumentation zu String.prototype.split () .

Der Aufruf von filter()dient dazu, die durch den Schrägstrich erzeugte leere Zeichenfolge herauszufiltern. Grundsätzlich wird nur der Fragment-URI zurückgegeben, dessen Länge größer als 1 ist (nicht leere Zeichenfolge). Also hätten wir so etwas wie ["question", "1234", "i-have-a-question"]. Dies hätte so geschrieben werden können:

'use strict';
window.location.pathname.split('/').filter(function(fragment) {
  return fragment.length > 0;
});

Weitere Informationen finden Sie in der Dokumentation zu Array.prototype.filter () und in der Destructuring-Zuweisung .

Wenn der Benutzer versucht, während der https://domain/Aktivierung zurückzukehren, wird die if-Anweisung nicht ausgelöst, und die window.history.back()Methode wird nicht ausgelöst , damit der Benutzer auf unserer Website bleibt. Diese URL entspricht []einer URL von 0und 0 > 0ist falsch. Daher stillschweigend scheitern. Natürlich können Sie etwas protokollieren oder eine andere Aktion ausführen, wenn Sie möchten.

'use strict';
function previousPage() {
  if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
    window.history.back();
  } else {
    alert('You cannot go back any further...');
  }
}

Einschränkungen

Natürlich funktioniert diese Lösung nicht, wenn der Browser die Verlaufs- API nicht unterstützt . Lesen Sie die Dokumentation, um mehr darüber zu erfahren, bevor Sie diese Lösung verwenden.

Ich bin nicht sicher, ob dies funktioniert und es ist völlig ungetestet, aber versuchen Sie Folgendes:

<script type="text/javascript">

    function goBack() {
        history.back();
    }

    if (history.length > 0) { //if there is a history...
        document.getElementsByTagName('button')[].onclick="goBack()"; //assign function "goBack()" to all buttons onClick
    } else {
        die();
    }
</script>

Und irgendwo in HTML:

<button value="Button1"> //These buttons have no action
<button value="Button2">

BEARBEITEN:

Sie können auch untersuchen, welche Browser die Back-Funktion unterstützen (ich glaube, alle tun dies) und das Standardobjekt zur Erkennung von JavaScript-Browsern verwenden, das auf dieser Seite gefunden und ausführlich beschrieben wird . Dann können Sie zwei verschiedene Seiten haben: eine für die "guten Browser", die mit der Zurück-Schaltfläche kompatibel sind, und eine für die "schlechten Browser", die ihnen sagen, dass sie ihren Browser aktualisieren sollen

Überprüfen Sie, ob window.history.lengthgleich 0 ist.