Detaillierte Antwort zur Verwendung von document.referrer in JavaScript (Code im Anhang)

Dieser Artikel führt Sie hauptsächlich in die Verwendung von document.referrer in JavaScript ein. Der Artikel stellt es detailliert anhand von Beispielcode vor, der für jeden, der ihn benötigt, einen gewissen Referenz- und Lernwert hat.

Vorwort

In JavaScript verfügt das Dokumentobjekt über viele Attribute, darunter drei Attribute, die sich auf Anfragen für Webseiten beziehen: bzw. Es handelt sich um URL, Domain und Referrer.

Das URL-Attribut enthält die vollständige URL der Seite, das Domain-Attribut enthält nur den Domainnamen der Seite und das Referrer-Attribut speichert die URL der Seite, die mit der aktuellen Seite verlinkt ist.

Die ersten beiden sind leicht zu verstehen und das Referrer-Attribut ist einfach die URL der vorherigen Seite. Was ist also die konkrete Verwendung dieses Attributs?

Auf H5-Seiten fügen wir oft eine Schaltfläche „Zurück zur vorherigen Seite“ in die Kopfzeile ein, etwa so:

Seitenkopfzeile

Klicken Sie auf das Element links, um zur vorherigen Seite zurückzukehren. Wir können einfach einen Teil des JS-Codes schreiben:

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

Oder dort ist eine einfachere Möglichkeit, ohne so viel JS zu schreiben. Verwenden Sie einfach das Tag a, um das Element der Zurück-Schaltfläche direkt darzustellen:

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

Huh? Nachdem ich so viel oben gesagt habe, habe ich immer noch nicht erwähnt, wozu document.referrer dient! Keine Sorge, die Vorderseite ist nur eine Vorahnung, kommen wir zum Punkt~~~

Obwohl es sich so anfühlt, als hätte das Obige im Grunde die Funktion der Rückkehr zur vorherigen Seite implementiert, gibt es eine Situation, in der dies der Fall ist nicht berücksichtigt (wir Programmierer müssen immer noch strenger sein), das heißt, was wäre, wenn die Seite von jemand anderem geteilt würde, anstatt über andere Seiten eingegeben zu werden? Wenn Sie dann auf die Schaltfläche klicken, wird keine Reaktion ausgelöst, da zu diesem Zeitpunkt kein Verlaufsdatensatz im Verlaufsobjekt vorhanden ist. Dies bedeutet, dass dies die erste Seite ist, die beim Öffnen Ihres Browserfensters durchsucht wird.

Um das Benutzererlebnis zu optimieren, gibt es hier in der Regel zwei Lösungen. Eine besteht darin, die Schaltfläche „Zurück zur vorherigen Seite“ beim Öffnen der ersten Seite nicht anzuzeigen, und die andere darin, direkt zur Startseite der Website zu springen. Auf diese Weise können Sie die geeignete Lösung basierend auf den Produktanforderungen auswählen.

Angenommen, dass die erste Option gewählt wird, können wir einen JS-Absatz wie diesen schreiben:

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

Fazit

Tatsächlich lässt sich feststellen, ob es sich bei der aktuellen Seite um die Seite handelt, die der Benutzer ursprünglich geöffnet hat, nicht nur durch die Beurteilung des Referrer-Attributs, sondern auch dadurch, ob „history.length“ Null ist.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Javascript'sdocument.referrerBrowser-Unterstützung, Fehlerübersicht_Grundkenntnisse

document.referrer in JavaScript Testergebnisse in verschiedenen Browsern_Grundkenntnisse

Javascript document.referrer Verwendung_ Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonDetaillierte Antwort zur Verwendung von document.referrer in JavaScript (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!