JavaScript でドキュメント リファラーを取得する
この記事では、Web ページの実行中に JavaScript のイベントと関数を使用してプログラムでドキュメント リファラーを取得する方法を、さまざまな例とともに紹介します。
ドキュメント リファラー
リファラーは、現在の Web ページにリンクされているドキュメントの URL を返す DOM 読み取り専用プロパティです。 現在の Web ページに到達したら、リンクまたは任意のボタンをクリックしてナビゲートします。
クライアント側アプリケーションから Web サイトまたは任意の Web ページにアクセスするには、ドキュメントの URL またはパスが必要です。 これは、サーバーにアップロードされた特定の Web サイト、Web ページ、またはファイルの場所です。
ユーザーが特定の Web サイトを呼び出して呼び出すために Web ブラウザーの検索に入力する文字列は、Web サイトの URL です。
たとえば、https://www.delftstack.com/ は、アプリケーション層プロトコル (HTTP) を使用した DelftStack の完全な URL です。
プロパティの構文:
document.referrer; // it will get us complete web URL with (HTTPS) like
// (https://www.delftstack.com/)
ウェブサイトまたはウェブページを開発しているとします。 また、状況によっては、Web サイトの実行時に現在のドキュメント リファラーをプログラムで見つけて使用する必要があります。
JavaScriptを使用して処理できます。 カスタムの戻るナビゲーションを維持する場合に役立ちます。
JavaScript でドキュメント リファラーを取得する
HTML では、DOM referrer プロパティは読み取り専用であり、現在の Web ページにリンクされている HTML ドキュメントまたは Web ページの URL を取得するために JavaScript ソース内で使用されます。 ユーザーがブックマークを介してページに直接アクセスした場合、このプロパティの戻り値は空の文字列になります。
ネットワーク層プロトコル (HTTPS) を含め、DOM referrer プロパティを使用して URL 全体を取得できます。
基本的な構文:
let refURL = document.referrer
コード例:
<!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>
コード例の説明:
- 上記の HTML ソース コードでは、段落要素タグ
<p></p>を使用し、その要素に ID を割り当てています。 <script></script>タグ内で、refUrl変数を宣言して初期化しました。- ドキュメントの URL を取得するために、
document.referrerプロパティを使用し、戻り値を変数に格納しました。 - 最後に、
document.getElementById()メソッドを使用して、結果の文字列を段落に表示しました。 - 上記のソースを拡張子
.htmlで保存し、結果を確認できます。