Maison > interface Web > js tutoriel > Réponse détaillée à l'utilisation de document.referrer en JavaScript (code ci-joint)

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

亚连
Libérer: 2018-05-19 10:43:38
original
1924 Les gens l'ont consulté

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)
};
Copier après la connexion

< 🎜. > 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>
Copier après la connexion

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 = &#39;block&#39;; //默认让其隐藏,当referrer属性不为空时让其显示
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal