Réponse détaillée à l'utilisation de document.referrer en JavaScript (code ci-joint)

Cet article vous présente principalement l'utilisation de document.referrer en JavaScript. L'article le présente en détail à travers un exemple de code, qui a une certaine valeur de référence et d'apprentissage pour tous les amis qui en ont besoin peuvent y jeter un œil ci-dessous.

Préface

En JavaScript, l'objet document possède de nombreux attributs, parmi lesquels on retrouve 3 attributs liés aux requêtes de pages web, qui sont respectivement, il s'agit de l'URL, du domaine et du référent.

L'attribut URL contient l'URL complète de la page, l'attribut domain contient uniquement le nom de domaine de la page et l'attribut referrer stocke l'URL de la page liée à la page actuelle.

Les deux premiers sont faciles à comprendre, et l'attribut referrer est simplement l'URL de la page précédente. Alors, quelle est l’utilisation spécifique de cet attribut ?

Dans les pages H5, on ajoute souvent un bouton de retour à la page précédente dans l'en-tête, comme ceci :

En-tête de page

Cliquez sur l'élément à gauche pour revenir à la page précédente On peut simplement écrire un bout de code JS :

var back = document.getElementById('back'); //假设该返回按钮元素id为back
back.onclick = function(){
 history.back(); //返回上一个页面，也可以写成history.go(-1)
};

Ou il existe un moyen plus simple, vous n'avez pas besoin d'écrire autant de JS, il vous suffit d'utiliser directement la balise a pour représenter l'élément du bouton retour :

<a id="back" href="javascript:history.back();" rel="external nofollow" ></a>

Hé ? Cela dit, je n’ai toujours pas mentionné à quoi sert

 ! Ne vous inquiétez pas, le recto n'est qu'une préfiguration, allons droit au but~~~document.referrer

Bien qu'il semble que ce qui précède ait essentiellement implémenté la fonction de retour à la page précédente, il y a une situation qui a n'a pas été prise en compte (nous, les programmeurs, devons encore être plus rigoureux), c'est-à-dire que se passerait-il si la page était partagée par quelqu'un d'autre au lieu d'être consultée via d'autres pages ? Ensuite, cliquer sur le bouton ne provoquera aucune réaction, car il n'y a aucun enregistrement d'historique dans l'objet historique pour le moment, ce qui signifie qu'il s'agit de la première page consultée lorsque la fenêtre de votre navigateur est ouverte.

Afin d'optimiser l'expérience utilisateur, il existe généralement ici deux solutions. L'une consiste à ne pas afficher le bouton de retour à la page précédente lors de l'ouverture de la première page, et l'autre consiste à cliquer directement pour accéder à la page d'accueil du site Web. Cela vous permet de choisir la solution appropriée en fonction des exigences du produit.

En supposant que la première option soit choisie, on peut écrire un paragraphe JS comme celui-ci :

if(document.referrer){
 back.style.display = 'block'; //默认让其隐藏，当referrer属性不为空时让其显示
}

Conclusion

En fait, la façon de déterminer si la page actuelle est la page que l'utilisateur a initialement ouverte n'est pas seulement de juger l'attribut referrer, mais aussi de savoir si history.length est nul .

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

javascriptdocument.referrerPrise en charge du navigateur, résumé des échecs_connaissances de base

document.referrer en JavaScript Résultats des tests dans divers navigateurs_Connaissances de base

javascript document.referrer Utilisation_ compétences javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!