web-dev-qa-db-fra.com

Utilisation de Javascript: comment créer un lien "Retour" qui renvoie l'utilisateur à un lien s'il n'y a pas d'historique pour l'onglet ou la fenêtre?

EDIT-2: Aucune des réponses ne semble fonctionner. Même celle que j'ai précédemment marquée comme réponse à cette question. Toute aide est la bienvenue. Merci.

Tout d’abord, j’ai cherché dans un tutoriel un lien «Retour» qui permet à l’utilisateur de revenir à la page précédente. Il existe deux façons de le faire:

<a href="javascript:history.go(-1)">[Go Back]</a>

et...

<a href="#" onclick="history.go(-1);return false;">[Go Back]</a>

Lequel de ces deux est un meilleur choix? Et pourquoi? (Veuillez également nous éclairer sur la compatibilité du navigateur.)

C'est la moitié de la question. Maintenant, si la mienne est la première page visitée par l'utilisateur, le lien "Retour" ne fonctionnerait pas, n'est-ce pas? (Comme il n'y a pas d'historique préexistant pour la fenêtre ou l'onglet.) Dans ce cas, je souhaite que le lien se replie et que l'utilisateur accède à http://example.com .

c'est-à-dire que si l'historique existe, l'utilisateur est redirigé vers la page précédente, sinon, il est dirigé vers http://example.com .

Comment je fais ça? J'espère que quelqu'un peut aider.

EDIT: Veuillez noter que je ne connais pas JavaScript, merci de bien vouloir expliquer votre réponse. Merci.

javascripthtml
58
its_me

Vous ne pouvez pas vérifier window.history.length car il contient le nombre total de pages visitées au cours d’une session donnée:

window.history.length (entier)

Lecture seulement. Renvoie le nombre d'éléments dans l'historique de la session, y compris la page actuellement chargée. Par exemple, pour une page chargée dans un nouvel onglet, cette propriété renvoie 1. Cite 1

Disons qu'un utilisateur visite votre page, clique sur certains liens et revient en arrière:

 www.mysite.com/index.html <- première page et maintenant la page actuelle <---- + 
 www.mysite.com/about.html | 
 www.mysite.com/about .html # privacy | 
 www.mysite.com/terms.html <- l'utilisateur utilise le bouton précédent ou la solution fournie pour revenir en arrière

Désormais, window.history.length est égal à 4. Vous ne pouvez pas parcourir les éléments de l'historique pour des raisons de sécurité. Sinon, on pourrait lire l'historique de l'utilisateur et obtenir son identifiant de session de banque en ligne ou d'autres informations sensibles.

Vous pouvez définir un délai qui vous permettra d’agir si la page précédente n’est pas chargée dans un temps donné. Cependant, si l'utilisateur a une connexion Internet lente et que le délai est trop court, cette méthode le redirigera tout le temps vers votre emplacement par défaut: 

window.goBack = function (e){
    var defaultLocation = "http://www.mysite.com";
    var oldHash = window.location.hash;

    history.back(); // Try to go back

    var newHash = window.location.hash;

    /* If the previous page hasn't been loaded in a given time (in this case
    * 1000ms) the user is redirected to the default location given above.
    * This enables you to redirect the user to another page.
    *
    * However, you should check whether there was a referrer to the current
    * site. This is a good indicator for a previous entry in the history
    * session.
    *
    * Also you should check whether the old location differs only in the hash,
    * e.g. /index.html#top --> /index.html# shouldn't redirect to the default
    * location.
    */

    if(
        newHash === oldHash &&
        (typeof(document.referrer) !== "string" || document.referrer  === "")
    ){
        window.setTimeout(function(){
            // redirect to default location
            window.location.href = defaultLocation;
        },1000); // set timeout in ms
    }
    if(e){
        if(e.preventDefault)
            e.preventDefault();
        if(e.preventPropagation)
            e.preventPropagation();
    }
    return false; // stop event propagation and browser default event
}

<span class="goback" onclick="goBack();">Go back!</span>

Notez que typeof(document.referrer) !== "string" est important car les éditeurs de navigateurs peuvent désactiver le référent pour des raisons de sécurité (hachages de session, URL GET personnalisées). Mais si nous détectons un parrain et qu'il est vide, il est probablement prudent de dire qu'il n'y a pas de page précédente (voir la remarque ci-dessous). Il peut néanmoins y avoir une étrange bizarrerie dans le navigateur, il est donc plus sûr d’utiliser le délai d’expiration que d’utiliser une simple redirection.

EDIT: N'utilisez pas <a href='#'>...</a> car cela ajouterait une autre entrée à l'historique de la session. Il vaut mieux utiliser un <span> ou un autre élément. Notez que typeof document.referrer est toujours "string" et n'est pas vide si votre page se trouve à l'intérieur d'un cadre (i).

Voir également:

31
Zeta

check window.history.length ou simplement, history.length

EDIT:certains navigateurs commencent leur historique avec 0, d'autres avec 1. s'ajuste en conséquence.

s'il a la valeur 1, cela signifie que c'est la première page de cette fenêtre/onglet - vous pouvez alors être redirigé par JS.

<script>
    function backAway(){
        //if it was the first page
        if(history.length === 1){
            window.location = "http://www.mysite.com/"
        } else {
            history.back();
        }
    }
</script>

<a href="#" onClick="backAway()">Back</a>
13
Joseph

les deux fonctionneraient de la même manière, ce sont juste deux méthodes différentes pour appeler la même fonction Essayez ce qui suit:

<a href="javascript:history.back();">[Go Back]</a>
9
spacebiker

La raison d'utiliser le return:false; est bien expliquée sur cette question autre .

Pour l’autre problème, vous pouvez vérifier le referrer pour voir s’il est vide:

    function backAway(){
        if (document.referrer == "") { //alternatively, window.history.length == 0
            window.location = "http://www.example.com";
        } else {
            history.back();
        }
    }

<a href="#" onClick="backAway()">Back Button Here.</a>
7
ajax333221
echo "<p><a href=\"javascript:history.go(-1)\" title=\"Return to previous page\">&laquo;Go back</a></p>";

Reviendra d'une page.

echo "<p><a href=\"javascript:history.go(-2)\" title=\"Return to previous page\">&laquo;Go back</a></p>";

Reviendra deux pages en arrière.

7
Steve

cela semble faire l'affaire: 

function goBackOrGoToUrl() {    

    window.history.back();
    window.location = "http://example.com";

}

Appelez history.back (), puis modifiez l'emplacement. Si le navigateur peut revenir dans l'historique, il ne pourra pas accéder à la prochaine déclaration. S'il ne peut pas revenir en arrière, il ira à l'emplacement spécifié.

4
xtrahelp.com

Le code suivant a fait le tour pour moi.

html:

<div class="back" onclick="goBackOrGoHome()">
  Back
</div>

js:

home_url = [YOUR BASE URL];

pathArray = document.referrer.split( '/' );
protocol = pathArray[0];
Host = pathArray[2];

url_before = protocol + '//' + Host;

url_now = window.location.protocol + "//" + window.location.Host;


function goBackOrGoHome(){
  if ( url_before == url_now) {
    window.history.back();    
  }else{
    window.location = home_url;
  };
}

Donc, vous utilisez document.referrer pour définir le domaine de la page d'où vous venez. Ensuite, vous comparez cela avec votre URL actuelle en utilisant window.location.

S'ils appartiennent au même domaine, cela signifie que vous venez de votre propre site et que vous leur envoyez window.history.back(). S'ils ne sont pas identiques, vous venez d'ailleurs et vous devriez rediriger votre foyer ou faire ce que vous voulez.

2
Arles

utilisez simplement des cookies pour stocker votre liste de pages visitées.

et en appliquer si sinon.

EDIT: utilisez également ServerVariables HTTP_REFERER.

1
MRRaja

Vous devez vérifier à la fois document.referrer et history.length comme dans ma réponse à une question similaire: https://stackoverflow.com/a/36645802/1145274

1
gregmatys

Ajout d'une nouvelle réponse pour afficher le code formaté:

Le fait est que vous recherchiez document.referer, parce que vous étiez dans le cas où il retournait toujours vrai, alors il naviguait vers http://mysite.com . Essayez ce qui suit:

function backAway(){
    if (document.referrer) {
        //firefox, chrome, etc..
        i = 0;
    } else {
        // under ie
        i = 1;
    }
    if (history.length>i)
    {
        // there are items in history property
        history.back();
    } else {
        window.location = 'http://www.mysite.com/';
    }
    return false;
}
1
spacebiker

Pourquoi ne pas utiliser la fonction de remplacement d'historique pour ajouter le site à l'historique des navigateurs?

Essayez d’exécuter ce qui suit dès le chargement de la fenêtre.

history.replaceState("example", "title", "http://www.example.com");

J'espère que cela devrait permettre que même si c'est la première page à laquelle ils ont accédé, l'URL que vous définissez dans le code sera celle à laquelle ils seront redirigés lorsqu'ils cliquent.

0
Muhan Alim

Vous devez utiliser la variable window - window.referrer . Cette variable contient la dernière page visitée par l'utilisateur s'il est arrivé à la page en cours en cliquant sur un lien Par exemple:

  function goBack() {
    if(document.referrer) {
      window.location.href = document.referrer;

      return;
    } 

    window.location.pathname = '/';
  }

Ce code redirige l'utilisateur vers la page précédente s'il existe et redirige l'utilisateur vers la page d'accueil s'il n'y a pas d'URL précédente

0
vladpopovv