Step.12 - リンク元のURLを調べる


リンク元がお友達のページであれば、「○×さんのホームページからお越しですね。ありがとうございます。」と表示してみたら面白いかもしれません。


Step テーマ
● document.referrer - リンク元の取得
● indexOf - 文字列の検索

実行例





リスト


<script type="text/javascript"><!--
 if (document.referrer.length !=0 ){
     myRef = document.referrer;
     if ( myRef.indexOf( "http://www.google.co.jp" ) == 0 ){
         document.write( "Google検索からお越しですね！ ありがとうございます！" );
     }else if ( myRef == "http://www.red.oit-net.jp/tatsuya/java/index.htm" ){
         document.write( "イヌでもわかるJavaScript講座 目次 から いらっしゃいませ！" );
     }else{
         document.write( myRef + "からお越しですね！" );
     }
}else{
     document.write( "直接このホームページへお越し下さってありがとうございます" );
}
// --></SCRIPT>

サンプルだけの HTMLは こちらへ

説明


リンク元を調べるには、document.referrer を使います。
この中にリンク元の URL が入っています。
お気に入りや 直接URLを入力して ページに入ったのであれば なにも入っていません。つまり、"" です。
※ IE3は document.referrer は対応していません。

リンク元があるかないかを調べるために、文字の長さ document.referrer.length で判断しました。
リンク元がなければ文字(URL) が入っていないので 0 です。

document.referrer の内容
「」
document.referrer.length の値
「」

if (document.referrer.length !=0 ){
     myRef = document.referrer;
     if ( myRef.indexOf( "http://www.google.co.jp" ) == 0 ){
         document.write( "Google検索からお越しですね！ ありがとうございます！" );
     }else if ( myRef == "http://www.red.oit-net.jp/tatsuya/java/index.htm" ){
         document.write( "イヌでもわかるJavaScript講座 目次 から いらっしゃいませ！" );
     }else{
         document.write( myRef + "からお越しですね！" );
     }
}else{
     document.write( "直接このホームページへお越し下さってありがとうございます" );
}
 リンク元があれば、Google の検索から来た時と、このサイトの目次から入ってきた時、それ以外の時の あいさつ表示。
リンク元がなければ、「直接ありがと」の あいさつ表示。
としています。


● indexOf - 文字列の検索
Google の URL であるかどうかを チェックするために indexOf を使いました。
if ( myRef.indexOf( "http://www.google.co.jp" ) == 0 )

indexOf は、指定した文字列があるかどうかを検索します。

書式：
検索位置 = 文字列変数.indexOf ( "検索キーワード" );

検索キーワードを見つけた場合は、戻り値に 見つけた文字位置 を返します。文字位置は ゼロから始まります。
検索キーワードが見つからない場合は、戻り値に -1 が返ります。

今回の場合は if 文の条件は 戻り値はゼロか としています。
if ( myRef.indexOf( "http://www.google.co.jp" ) == 0 )
つまり、文字列の先頭でいきなり見つけたなら、ということです。

とにかく文字列に検索キーワードがあるかどうかを調べたければ、
if ( myRef.indexOf( "http://www.google.co.jp" ) >= 0 )
となります。

▲TOP

リファレンス


● document.referrer プロパティ

リンク元の URLを保持しています。

【書式】
myURL = document.referrer ;

【値】
リンク元のURLの文字列。
「」

※ 読み込み専用でセットすることはできません。
※ [ファイル]→[開く] や アドレスバー等からユーザが直接URLを打ち込んでページに到着した場合は、ヌルストリングが返されます。
▲TOP

Q&A 1


[Q]　私のホームページはフレームを使っていて、毎回自分のホームページのindex.htmlよりお越しですね。と表示されてしまうのですが…
[A]　parent.document.referrer で参照してください。
▲TOP

Q&A 2


[Q]　http://URL/index.html から来たはずなのに メッセージが表示されません。
[A]　index.html が省略されている場合があります。http://URL/ で indexOf してください。
▲TOP