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

Je veux utiliser JavaScript pour voir s'il y a un historique ou non, je veux dire si le bouton retour est disponible sur le navigateur ou non.

Réponse courte: vous ne pouvez pas.

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

history.previous

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

history.length

C'est une propriété que d'autres ont suggérée ...
Cependant , la longueur ne fonctionne pas complètement car elle n'indique pas où vous vous trouvez dans l'histoire. De plus, il ne commence pas toujours par le même numéro. Un navigateur qui n'est pas configuré pour avoir une page de destination, par exemple, commence à 0 tandis qu'un autre navigateur qui utilise une page de destination démarre à 1.

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

history.back();

ou

 history.go(-1);

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

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

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

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

Lorsque le bouton de retour n'était pas disponible, l'URL de secours sera chargée après 500 ms, de sorte que le navigateur a suffisamment de temps pour charger la page précédente. Le chargement de l'URL de secours juste après window.history.go(-1);obligerait le navigateur à utiliser l'URL de secours, car le script js ne s'est 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);
}

Voici comment je l'ai fait.

J'ai utilisé l' événement 'beforeunload' pour définir un booléen. Ensuite, j'ai défini un délai pour regarder si le 'beforeunload' se déclenche.

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é FF, Chrome, IE11 jusqu'à présent).

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 est capable de revenir dans l'historique, il ne pourra pas accéder à l'instruction suivante. S'il ne peut pas revenir en arrière, il fermera la fenêtre.

Cependant, veuillez noter que si la page a été atteinte en tapant une URL, Firefox n'autorisera pas le script à fermer la fenêtre.

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

Pour info: j'utilise History.js pour gérer l'historique du navigateur.

Pourquoi comparer history.length au numéro 2?

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

Il y a peu de possibilités history.lengthet de comportement de l'utilisateur:

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

Remarque: j'omets le cas où l'utilisateur atterrit sur 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 le site Web en tapant son adresse et également lorsque le site Web utilise ajax pour charger des sous-pages, j'ai donc arrêté de vérifier cette valeur dans le premier cas.

Soyez prudent window.history.lengthcar il inclut également des entrées pourwindow.history.forward()

Ainsi, vous pouvez avoir peut-être window.history.lengthplus de 1 entrées, mais aucune entrée d'historique. Cela signifie que rien ne se passe si vous tirezwindow.history.back()

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

Si cela ne suffit pas, il vous suffit d'appeler history.back()et, si votre page est toujours chargée par la suite, le bouton retour n'est pas disponible! Bien sûr, cela signifie que si le bouton de retour est disponible, vous venez de quitter la page. Vous n'êtes pas autorisé à annuler la navigation dans onunload, donc tout ce que vous pouvez faire pour empêcher le retour de se produire est de renvoyer quelque chose onbeforeunload, ce qui entraînera l'apparition d'une grande invite ennuyeuse. Ça ne vaut pas le coup.

En fait, c'est normalement une très mauvaise idée de faire quoi que ce soit avec l'histoire. La navigation dans l'historique concerne le chrome du navigateur, pas les pages Web. L'ajout de liens «retour» provoque généralement plus de confusion pour les utilisateurs que cela ne vaut la peine.

history.lengthest inutile car il ne montre pas si l'utilisateur peut revenir dans l'histoire. De plus, différents navigateurs utilisent les valeurs initiales 0 ou 1 - cela dépend du navigateur.

La solution de travail consiste à utiliser l' $(window).on('beforeunload'événement, 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 de la fenêtre.

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

J'ai proposé l'approche suivante. Il utilise l'événement onbeforeunload pour détecter si le navigateur commence à quitter la page ou non. Si ce n'est pas le cas dans un certain laps de temps, il sera simplement redirigé vers la solution de secours.

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").

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

Si l'historique de la page est plus d'un, alors nous pouvons revenir à la page précédente à la page actuelle. Sinon, l'onglet est un onglet nouvellement ouvert et nous devons créer un nouvel onglet.

À la différence des réponses liées, nous ne vérifions pas un referrercar un nouvel onglet aura toujours un référent.

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

Il existe une autre solution presque parfaite, tirée d' une autre réponse SO :

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 fonctionne pas lors de l'utilisation, target="_blank"mais cela semble fonctionner pour moi sur Chrome.

le navigateur a le bouton précédent et suivant. Je trouve une solution sur cette question. mais cela affectera l'action de transfert du navigateur et causera des bogues avec certains navigateurs.

Cela fonctionne comme ça: Si le navigateur ouvre une nouvelle URL, qui ne s'est jamais ouverte, la longueur de history.length augmentera.

afin que vous puissiez changer le hachage 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, en particulier lorsque l'URL saute rapidement.

J'essayais de trouver une solution et c'est la meilleure que je puisse obtenir (mais fonctionne très bien et c'est la solution la plus simple que j'ai trouvée même ici).

Dans mon cas, je voulais revenir sur l'historique avec un bouton de retour, mais si la première page ouverte par l'utilisateur était une sous-page de mon application, elle reviendrait à la page principale.

La solution était, dès que l'application est chargée, je viens de faire un remplacement sur l'état de l'historique:

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

De cette façon, j'ai juste besoin de vérifier history.state.rootavant de revenir en arrière. Si c'est vrai, je fais un remplacement d'historique à la place:

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;

Solution

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

Explication

window.location.pathnamevous donnera l'URI actuel. Par exemple https://domain/question/1234/i-have-a-problemdonnera /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 là pour filtrer la chaîne vide générée par la barre oblique inverse. Il renverra essentiellement uniquement l'URI du fragment qui a une longueur supérieure à 1 (chaîne non vide). Donc, nous aurions quelque chose comme ["question", "1234", "i-have-a-question"]. Cela aurait pu être écrit comme ceci:

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

Voir la documentation sur Array.prototype.filter () et l' affectation Destructuring pour plus d'informations.

Maintenant, si l'utilisateur essaie de revenir en arrière tout en étant https://domain/allumé, nous ne déclencherons pas l'instruction if, et nous ne déclencherons donc pas la window.history.back()méthode pour que l'utilisateur reste sur notre site Web. Cette URL sera équivalente à []laquelle a une longueur de 0et 0 > 0est fausse. Par conséquent, échouant 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 History . Consultez la documentation pour en savoir plus avant d'utiliser cette solution.

Je ne sais pas si cela fonctionne et ce n'est pas du tout testé, mais essayez ceci:

<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>

Et quelque part en HTML:

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

ÉDITER:

Ce que vous pouvez également faire est de rechercher ce que les navigateurs prennent en charge la fonction de retour (je pense qu'ils le font tous) et d'utiliser l'objet de détection de navigateur JavaScript standard trouvé et décrit en détail sur cette page . Ensuite, vous pouvez avoir 2 pages différentes: une pour les "bons navigateurs" compatible avec le bouton retour et une pour les "mauvais navigateurs" leur disant d'aller mettre à jour leur navigateur

Vérifiez si window.history.lengthest égal à 0.