javascript - Hur man kontrollerar om användaren kan gå tillbaka i webbläsarens historik eller inte

Jag vill använda JavaScript för att se om det finns någon historik eller inte, jag menar om bakåtknappen är tillgänglig i webbläsaren eller inte.

Svar #1

Kort svar: Du kan inte.

Tekniskt sett finns det ett exakt sätt, vilket skulle vara att kontrollera egenskapen:

history.previous

Men det fungerar inte. Problemet med detta är att det i de flesta webbläsare anses vara ett säkerhetsbrott och brukar vanligtvis bara returnera undefined.

history.length

Är en egenskap som andra har föreslagit...
Dock fungerar längden inte helt eftersom den inte visar var i historiken du befinner dig. Dessutom börjar den inte alltid på samma nummer. En webbläsare som inte är inställd på att ha en startsida börjar till exempel på 0, medan en annan webbläsare som använder en startsida börjar på 1.

För det mesta läggs en länk till som anropar:

history.back();

eller

 history.go(-1);

och det förväntas helt enkelt att om du inte kan gå tillbaka så gör det inget att klicka på länken.

Svar #2

Det finns ett annat sätt att kontrollera - kontrollera referensen. Den första sidan kommer vanligtvis att ha en tom referens...

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

Svar #3

Min kod låter webbläsaren gå tillbaka en sida, och om det misslyckas laddar den en fallback-URL. Den upptäcker också ändringar av hashtags.

När bakåtknappen inte var tillgänglig kommer fallback-URL:en att laddas efter 500 ms, så att webbläsaren har tillräckligt med tid för att ladda den föregående sidan. Att ladda fallback-URL:en direkt efter window.history.go(-1); skulle få webbläsaren att använda fallback-URL:en, eftersom JS-skriptet ännu inte har stoppat.

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

Svar #4

Här är hur jag gjorde det.

Jag använde 'beforeunload'-händelsen för att ställa in en boolean. Sedan satte jag ett timeout för att se om 'beforeunload' utlösts.

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

Verkar fungera i större webbläsare (testat FF, Chrome, IE11 hittills).

Svar #5

Det finns ett kodsnutt jag använder i mina projekt:

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, '/');
    }
}

För din information: Jag använder History.js för att hantera webbläsarhistorik.

Varför jämföra history.length med numret 2?

Eftersom Chromes startsida räknas som det första objektet i webbläsarens historik.

Det finns få möjligheter för history.length och användarens beteende:

  • Användaren öppnar ny tom flik i webbläsaren och kör sedan en sida. history.length=2 och vi vill inaktivera back() i detta fall, eftersom användaren kommer att gå till den tomma fliken.
  • Användaren öppnar sidan i ny flik genom att klicka på en länk någonstans tidigare. history.length=1 och igen vill vi inaktivera back()-metoden.
  • Och slutligen, användaren landar på den aktuella sidan efter att ha laddat om några sidor. history.length > 2 och nu kan back() aktiveras.

Obs: Jag utelämnar fallet när användaren landar på den aktuella sidan efter att ha klickat på en länk från en extern webbplats utan target="_blank".

Obs 2: document.referrer är tomt när du öppnar webbplatsen genom att skriva dess adress och även när webbplatsen använder ajax för att ladda undersidor, så jag slutade kontrollera detta värde i det första fallet.

Svar #6

Var försiktig med window.history.length eftersom det också inkluderar poster för window.history.forward()

Så du kan kanske ha window.history.length med mer än 1 post, men inga historikbakåtposter. Detta betyder att ingenting händer om du kör window.history.back()

Svar #7

det verkar fungera:

function goBackOrClose() {  

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

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

}

Anropa history.back() och sedan window.close(). Om webbläsaren kan gå tillbaka i historiken kommer den inte att kunna nå nästa uttalande. Om den inte kan gå tillbaka kommer den att stänga fönstret.

Observera dock att om sidan har nåtts genom att skriva en URL, kommer Firefox inte att tillåta skriptet att stänga fönstret.

Svar #8

Du kan inte direkt kontrollera om bakåtknappen kan användas. Du kan titta på history.length>0, men det kommer att vara sant även om det finns sidor framför den aktuella sidan. Du kan bara vara säker på att bakåtknappen inte kan användas när history.length===0.

Om det inte är tillräckligt bra, är det ungefär allt du kan göra att kalla history.back() och, om din sida fortfarande är laddad efteråt, är bakåtknappen inte tillgänglig! Självklart betyder det att om bakåtknappen är tillgänglig, har du precis navigerat bort från sidan. Du får inte avbryta navigeringen i onunload, så ungefär allt du kan göra för att hindra att bakåt verkligen händer är att returnera något från onbeforeunload, vilket kommer att resultera i en stor irriterande prompt som dyker upp. Det är inte värt det.

Faktiskt är det normalt en riktigt dålig idé att göra något med historiken. Historiknavigering är för webbläsarens gränssnitt, inte webbsidor. Att lägga till 'gå tillbaka'-länkar orsakar vanligtvis mer förvirring för användaren än vad det är värt.

Relaterade artiklar