Webブラウザにある戻るボタンとは別に、Webサイトのページ内に1つ前のページに戻るためのボタンを設置したい時があります。UIデザインを意識した時に必要なページが出てくることもあるでしょう。

そんなWebサイトのページ内に戻るボタンの機能を付けたい人のために、JavaScriptやPHPで1つ前のページに戻るボタンを設置する方法をご紹介します。

JavaScriptで戻るボタンを設置


まずはJavaScriptでの設置方法です。
こちらはシンプルでわかりやすいです。

historyオブジェクトのbackメソッドを使用します。

inputタグで汎用ボタンでクリック時の処理「onclick」を使用する方法とaタグのhref属性に設定する2パターンあります。

HTML

//onclick処理
<input value="前に戻る" onclick="history.back();" type="button">
 
//href属性に設定
<a href="javascript:history.back()">前に戻る</a>



ちなみに「history.forward();」は次のページに進む、「history.go()」は指定したURL履歴へ移動します。

history.go(-1)は、history.back()と同じで前のページへ。
history.go(1)は、history.forward()と同じで次のページへ。
history.go(URL)は、指定したURLに飛びます。

そんなに使わないと思いますが一応。。。

PHPで戻るボタンを設置


PHPではリファラ（ユーザーがサイトに流入する時に利用したリンク元のページの情報）の情報を使えば前に戻ることができます。

例えば、
「https://example.com/about」から「https://example.com/works」移動した時、リファラの情報はリンク元のページの情報になりますので「https://example.com/about」となります。
なので、リファラ情報を使ってworksページで戻るボタンを設置すれば、aboutページへ戻れることになります。

リファラ情報を使っての戻るボタンの表示はこちらになります。

PHP

<?php
echo '<a href="' . $_SERVER['HTTP_REFERER'] . '">前に戻る</a>';
?>



PHPのスーパーグローバル変数である「$_SERVER[‘HTTP_REFERER’]」を使います。
こちらでリファラ情報を取得することができます。

ここで問題が出てくるのですが、リファラ情報がなかったり検索窓から直接URLを打ち込んだりSNS等のメディアから飛んできた場合は、外部サイトに戻られてしまいます。

そこでリファラ情報があるかと外部サイトかどうかを判断していきます。

リンク元のURLを取得できない場合もありますので、「!empty($_SERVER[‘HTTP_REFERER’])」でリファラ値があるかどうかを確認。

もう1つは、リファラ値にホスト名が含まれているかの確認。
文字列を含むかをチェックしていきます。
特定の文字列を含むかをチェック方法は、正規表現を使う場合はpreg_matchを使用しますが、今回は変数を使っていきますのでstrposでいきます。
strstrもありますが、strstrよりstrposのほうが処理速度が速いです。（ほんのちょっとの差ですが）

ホスト名（ドメイン部分）を「$_SERVER[‘HTTP_HOST’]」で取得します。
strposの簡単な使用例はこんな感じです。

PHP

<?php
$r = $_SERVER['HTTP_REFERER'];
$h = $_SERVER['HTTP_HOST'];
if(strpos($r,$h) !== false){
  // $r(リファラ情報)に$h(ホスト名)が含まれている場合
} else {
　// $r(リファラ情報)に$h(ホスト名)が含まれていない場合
}
?>



変数$rにリファラ値を、変数$hに「$_SERVER[‘HTTP_HOST’]」を使ってホスト名（ドメイン部分）を格納して、strposで第1引数($r)、第2引数($h)で文字列が含まれているかを確認する。
ということになります。

strposの注意点としては、第2引数で文字列が見つかった位置（0番目から）の数値を返しますので0が返ってきた場合はfalse判定となりelseの処理に入ります。
0をfalseと判定しないために型も含めて比較する不等価演算子「!==」を使う必要があります。

すべてを踏まえてまとめたのがこちら。

PHP

<?php
 
//ホスト名取得
$h = $_SERVER['HTTP_HOST'];
 
// リファラ値があれば、かつ外部サイトでなければaタグで戻るリンクを表示
if (!empty($_SERVER['HTTP_REFERER']) && (strpos($_SERVER['HTTP_REFERER'],$h) !== false)) {
  echo '<a href="' . $_SERVER['HTTP_REFERER'] . '">前に戻る</a>';
}
 
?>



これでサイト内で移動した時だけ前に戻るボタンが表示できるようになりました。