Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

直前に閲覧したページのURLを得る

どこか別のページからリンクをクリックして現在のページにアクセスした場合、ブラウザは、直前に閲覧していたページのURLを保持しています。この「直前に閲覧していたページのURL」の情報のことをReferrer(リファラ)といいます。リファラは、JavaScriptでも簡単に得ることができます。
例えば、以下のようなソースで。

var ref = document.referrer;

リファラ情報は、documentオブジェクトのreferrerプロパティに格納されています。上記のソースだと、変数refに、直前に閲覧していたページのURLが格納されます。

HTMLとJavaScriptで、直前に閲覧していたページのURLを表示するボタンを作った例は、以下の通り。

クリックすると、アラートボックスにリファラ情報(直前に閲覧していたページのURL)が表示されます。
なお、このページに、ブックマークを使ってアクセスした場合や、アドレス欄に直接URLを入力してアクセスした場合には、リファラ情報はありませんので、何も表示されません。
URLが得られるのは、リンクをクリックして移動してきた場合のみです。

上記サンプルを作るHTMLとJavaScriptソースは、以下の通り。

<form>
<input type="button" value="リファラ表示" onclick="alert( document.referrer );" />
</form>

直前に閲覧していたページによって、パンくずリストの表示を動的に変えるとか、メニューの内容を変えるとか、「戻る」リンクの戻り先に使うとか、いろいろ活用できそうです。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど