Dokument-Referrer in JavaScript abrufen

  2. How-To's
  3. JavaScript-Anleitungen
  4. Dokument-Referrer in JavaScript abrufen
Muhammad Muzammil Hussain 12 Oktober 2023
JavaScript JavaScript DOM
  1. Dokument-Referrer
  2. Dokument-Referrer in JavaScript abrufen
Dokument-Referrer in JavaScript abrufen

In diesem Artikel wird anhand verschiedener Beispiele gezeigt, wie Sie während der Webseitenausführung mithilfe von JavaScript-Ereignissen und -Funktionen programmatisch einen Dokument-Referrer abrufen.

Dokument-Referrer

Der Referrer ist eine schreibgeschützte DOM-Eigenschaft, die die URL des Dokuments zurückgibt, das mit unserer aktuellen Webseite verknüpft ist. Wenn wir auf der aktuellen Webseite angekommen sind, können wir auf einen Link oder eine beliebige Schaltfläche klicken, um zu navigieren.

Um Zugriff auf eine Website oder eine beliebige Webseite von einer clientseitigen Anwendung zu erhalten, müssen wir die URL oder den Pfad des Dokuments anfordern. Es ist der Speicherort einer bestimmten Website, Webseite oder Datei, die auf einen Server hochgeladen wurde.

Eine Zeichenfolge, die Benutzer in eine Webbrowser-Suche eingeben, um eine bestimmte Website aufzurufen und aufzurufen, ist eine Website-URL.

Zum Beispiel ist https://www.delftstack.com/ die vollständige URL für DelftStack mit Application Layer Protocol (HTTP).

Eigenschaftssyntax:

document.referrer;  // it will get us complete web URL with (HTTPS) like
                    // (https://www.delftstack.com/)

Angenommen, wir entwickeln eine Website oder eine Webseite. Und unter bestimmten Umständen müssen wir den aktuellen Dokument-Referrer programmgesteuert während der Laufzeit der Website ermitteln und verwenden.

Wir können damit umgehen, indem wir JavaScript verwenden. Dies kann nützlich sein, wenn benutzerdefinierte Rückwärtsnavigationen verwaltet werden.

Dokument-Referrer in JavaScript abrufen

In HTML ist die DOM-Referrer-Eigenschaft schreibgeschützt und wird in JavaScript-Quellen verwendet, um die URL des HTML-Dokuments oder der Webseite zu erhalten, die mit der aktuellen Webseite verknüpft ist. Der Rückgabewert dieser Eigenschaft kann ein leerer String sein, wenn der Benutzer direkt über das Lesezeichen auf die Seite zugreift.

Einschließlich des Netzwerkschichtprotokolls (HTTPS) können wir die gesamte URL mithilfe der DOM-Referrer-Eigenschaft abrufen.

Grundlegende Syntax:

let refURL = document.referrer

Beispielcode:

<!DOCTYPE html>

<html>

<body>

<h1>DelftStack learning</h1>

  <h2>JavaScript get document referrer example</h2>

<p>We have arrived from this link : </p>

<p id="para"></p>

<script>

let refUrl = document.referrer // get referrer and storing in variable

document.getElementById("demo").innerHTML = refUrl; // assign value to paragraph

</script>

</body>

</html>

Beispielcode-Erklärung:

  1. Im obigen HTML-Quellcode haben wir das Absatzelement-Tag <p></p> verwendet und diesem Element eine ID zugewiesen.
  2. Innerhalb der Tags <script></script> haben wir die Variable refUrl deklariert und initialisiert.
  3. Um nun die Dokument-URL zu erhalten, haben wir die Eigenschaft document.referrer verwendet und den Rückgabewert in einer Variablen gespeichert.
  4. Schliesslich haben wir mit Hilfe der Methode document.getElementById() den Ergebnisstring im Absatz angezeigt.
  5. Sie können die obige Quelle mit einer .html-Erweiterung speichern und das Ergebnis sehen.

Verwandter Artikel - JavaScript DOM