web-dev-qa-db-fra.com

Comment vérifier si l'utilisateur peut ou non revenir dans l'historique du navigateur

Je veux utiliser JavaScript pour voir s'il y a de l'historique ou pas, je veux dire si le bouton Précédent est disponible ou non sur le navigateur.

javascript
111
Ryan

Réponse courte: vous ne pouvez pas.

Techniquement, il existe un moyen précis de vérifier la propriété:

history.previous

Cependant, cela ne fonctionnera pas. Le problème, c'est que dans la plupart des navigateurs, cela est considéré comme une violation de la sécurité et ne renvoie généralement que undefined .

history.length

Est-ce une propriété que d'autres ont suggéré ...
Cependant , la longueur ne fonctionne pas complètement car elle n'indique pas où dans l'historique que vous êtes. De plus, cela ne commence pas toujours au même numéro. Par exemple, un navigateur qui ne possède pas de page d'arrivée commence à 0, tandis qu'un autre navigateur utilisant une page de langue commence à 1.

alt text

La plupart du temps, un lien est ajouté qui appelle:

history.back();

ou 

 history.go(-1);

et on s'attend à ce que si vous ne pouvez pas revenir en arrière, cliquer sur le lien ne fait rien.

91
McAden

Il y a une autre façon de vérifier - vérifiez le référant. La première page aura généralement un référent vide ...

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

Mon code laisse le navigateur revenir à une page et si cela échoue, il charge une URL de secours. Il détecte également les changements de hashtags.

Lorsque le bouton Précédent n'était pas disponible, l'URL de secours est chargée après 500 ms. Le navigateur dispose donc de suffisamment de temps pour charger la page précédente. Charger l'URL de repli juste après window.history.go(-1); ferait en sorte que le navigateur utilise l'URL de repli, car le script js ne s'était pas encore arrêté.

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

cela semble faire l'affaire: 

function goBackOrClose() {  

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

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

}

Appelez history.back () puis window.close (). Si le navigateur peut revenir dans l'historique, il ne pourra pas accéder à la prochaine déclaration. Si vous ne pouvez pas revenir en arrière, la fenêtre sera fermée.

Cependant, veuillez noter que si la page a été atteinte en tapant une URL, alors Firefox ne permettra pas au script de fermer la fenêtre.

11
xtrahelp.com

Vous ne pouvez pas vérifier directement si le bouton Précédent est utilisable. Vous pouvez regarder history.length>0, mais cela sera vrai s'il y a aussi des pages à venir de la page actuelle. Vous ne pouvez être sûr que le bouton Précédent est inutilisable lorsque history.length===0.

Si cela ne suffit pas, vous ne pouvez que téléphoner à history.back() et, si votre page est toujours chargée, le bouton Précédent n'est pas disponible! Bien sûr, cela signifie que si le bouton Précédent est est disponible, vous venez de naviguer en dehors de la page. Vous n'êtes pas autorisé à annuler la navigation dans onunload, vous pouvez donc simplement renvoyer quelque chose à partir de onbeforeunload, ce qui entraînera l'apparition d'une grande invite agaçante. Ça ne vaut pas le coup.

En fait, c'est une très mauvaise idée de faire quoi que ce soit avec l'histoire. La navigation dans l'historique est pour le navigateur Chrome, pas les pages Web. L'ajout de liens «de retour» crée généralement plus de confusion que de peine.

9
bobince

Voici comment je l'ai fait. 

J'ai utilisé l'événement 'beforeunload' pour définir un booléen. Ensuite, je fixe un délai d'attente pour voir si le "avant-chargement" est déclenché.

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

Semble fonctionner dans les principaux navigateurs (testé jusqu'à présent avec FF, Chrome, IE11).

9
Toni Feistauer

Il y a un extrait que j'utilise dans mes projets:

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

FYI: J'utilise History.js pour gérer l'historique du navigateur.

Pourquoi comparer history.length au numéro 2?

Parce que la page de démarrage de Chrome est comptée comme premier élément de l'historique du navigateur.

Il y a peu de possibilités de history.length et du comportement de l'utilisateur:

  • L'utilisateur ouvre nouvel onglet vide dans le navigateur, puis lance une page. history.length = 2 et nous voulons désactiver back() dans ce cas, car l'utilisateur ira dans un onglet vide.
  • L'utilisateur ouvre la page dans nouvel onglet en cliquant sur un lien quelque part auparavant. history.length = 1 et encore une fois, nous voulons désactiver la méthode back().
  • Et enfin, l’utilisateur atterrit à la page actuelle après rechargement de quelques pages. history.length > 2 et maintenant back() peuvent être activés.

Remarque: J'omets le cas où l'utilisateur atterrit à la page actuelle après avoir cliqué sur le lien du site Web externe sans target="_blank".

Note 2:document.referrer est vide lorsque vous ouvrez un site Web en tapant son adresse et également lorsque le site Web utilise ajax pour charger des sous-pages. J'ai donc cessé de vérifier cette valeur dans le premier cas.

7
gregmatys

history.length est inutile car il ne montre pas si l'utilisateur peut revenir en arrière dans l'historique ..__ De plus, différents navigateurs utilisent les valeurs initiales 0 ou 1 - cela dépend du navigateur.

La solution de travail consiste à utiliser l'événement $(window).on('beforeunload', mais je ne suis pas sûr que cela fonctionnera si la page est chargée via ajax et utilise pushState pour modifier l'historique des fenêtres.

J'ai donc utilisé la solution suivante:

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

Soyez prudent avec window.history.length car il comprend également des entrées pour window.history.forward()

Donc, vous pouvez avoir peut-être window.history.length avec plus de 1 entrées, mais pas d'entrées d'historique en arrière ..__ Cela signifie que rien ne se passe si vous déclenchez window.history.back()

4
Blitzlord

Je suis venu avec l'approche suivante. Il utilise l'événement onbeforeunload pour détecter si le navigateur commence ou non à quitter la page. S'il ne le fait pas dans un certain délai, il ne fera que rediriger le repli.

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

Vous pouvez appeler cette fonction en utilisant goBack("fallback.example.org").

1
Pascal Raszyk

Il existe une autre solution near perfect, empruntée à une autre SO réponse :

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

Quelqu'un a signalé que cela ne fonctionnait pas avec target="_blank", mais cela semble fonctionner pour moi sur Chrome.

0
Yonn Trimoreau

Construire sur la réponse ici et ici . Je pense que la réponse la plus concluante consiste simplement à vérifier s'il s'agit d'une nouvelle page dans un nouvel onglet.

Si l'historique de la page contient plusieurs pages, nous pouvons revenir à la page précédente de la page en cours. Sinon, l'onglet est un nouvel onglet ouvert et nous devons créer un nouvel onglet.

De manière différente, pour les réponses liées, nous ne recherchons pas un referrer car un nouvel onglet aura toujours un référent.

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

Solution

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

Explication

window.location.pathname vous donnera l'URI actuel. Par exemple, https://domain/question/1234/i-have-a-problem donnera /question/1234/i-have-a-problem. Voir la documentation sur window.location pour plus d'informations.

Ensuite, l’appel à split() nous donnera tous les fragments de cet URI. donc si nous prenons notre URI précédent, nous aurons quelque chose comme ["", "question", "1234", "i-have-a-problem"]. Voir la documentation sur String.prototype.split () pour plus d’informations.

L'appel à filter() est ici pour filtrer la chaîne vide générée par la barre oblique inverse. En principe, il ne renvoie que l'URI du fragment dont la longueur est supérieure à 1 (chaîne non vide). Nous aurions donc quelque chose comme ["question", "1234", "i-have-a-question"]. Cela aurait pu être écrit comme suit:

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

Reportez-vous à la documentation sur Array.prototype.filter () et le Affectation de destruction pour plus d'informations.

Maintenant, si l'utilisateur essaie de revenir en arrière en étant sur https://domain/, nous ne déclencherons pas l'instruction if, ni la méthode window.history.back() pour que l'utilisateur reste sur notre site Web. Cette URL sera équivalente à [] qui a une longueur de 0, et 0 > 0 est faux. Par conséquent, échouer silencieusement. Bien sûr, vous pouvez enregistrer quelque chose ou avoir une autre action si vous le souhaitez.

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

Limites

Bien sûr, cette solution ne fonctionnera pas si le navigateur ne prend pas en charge l’API Historique . Consultez la documentation pour en savoir plus avant d’utiliser cette solution.

0
Amin NAIRI

le navigateur a un bouton précédent et suivant. Je trouve une solution sur cette question. mais cela affectera l'action vers l'avant du navigateur et causera un bogue avec certains navigateurs.

Cela fonctionne comme ça: Si le navigateur ouvre une nouvelle URL qui ne s’est jamais ouverte, la taille de l’historique sera augmentée. 

afin que vous puissiez changer de hash comme

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

pour obtenir une URL jamais affichée, alors history.length aura la vraie longueur.

  var realHistoryLength = history.length - 1

mais, cela ne fonctionne pas toujours bien, et je ne sais pas pourquoi, surtout quand url auto saute rapidement.

0
honchy gan