概要

JavaScriptでブラウザの「もどる」と同じ機能のボタンを作るのは簡単だが、条件によって状態を分岐させるのが割と面倒だった。サイト内の回遊は問題なく行えるけど、他のサイトから遷移してきたときは戻さないというルールとした。

条件	処理
同じサイトからの遷移	戻るボタン表示
SNSなど異なるサイトからの遷移	戻るボタン非表示
どこから来たか不明な場合	戻るボタン非表示
同じサイトから「別タブ」で見る	戻るボタン表示＆遷移先を指定

リファラを調べる

リファラとはどこから来たのかという情報。JavaScriptでは以下のように取得する。

referrer.js

const ref = document.referrer;

綴りはrが2つ続く「referrer」が正しい。HTTP選定時にスペルミスがあり、一部は「referer」になってるらしい。（wikipedia）
PHPでも取得できるが、うまく取得できない場合がある。（CDNの関係か？）
metaでreferrerの送信設定をすることができる。（MDN）

取得したURLのドメインと現在のページのドメインが一致したら「戻る」ボタンを表示するようにした。
（正規表現の部分は、シンプルに現在のページのドメインが含まれているでもいいかも...）

referrer.js

const ref = document.referrer;
const ref_domain = ref.match(/^https?:\/{2,}(.*?)(?:\/|\?|#|$)/)[1];
const now_domain = window.location.host;
if (ref_domain === now_domain) {
...
}

別タブ対応

同じサイト内から「別のタブで開く」場合、リファラ情報を持ちながら履歴がない状態になる。
（Safari v13ではこの場合にリファラ情報が取得できないため、「戻る」ボタンは非表示にした。）

初めは、履歴の有無を取得し履歴がない場合はボタンを非表示にする方法を検討したが、該当ページからどこかへ遷移して戻って来た場合、履歴はあるが戻れないという状況になってしまうので諦めた。
最終的には、一度ブラウザバックを実行し、戻ればよし、戻らなかったら遷移する場所を指定する方法にした。

blank.js

let is_before = false;
$(window).on('unload beforeunload',function () {
  is_before = true;
});
$('#js_back_button').on('click', function () {
  setTimeout(function () {
    if(!is_before){
      location.href = '/'; //どこかへ遷移させる。referrerで取得したurlでも良い。
    }
  }, 100);
});

blank.html

<a href="javascript:history.back();" id="js_back_button">戻る</a>

MacのFirefoxでトラブル

かなり限定的な話だが、以下の条件で「戻る」ボタンが動かなかったのでメモ。

aタグにjavascript:void(0);
JavaScriptでhistory.back();
Mac 10.14.6 ／Firefox 70.0.1 （windowsの同じバージョンのFirefoxは大丈夫）
ローカルの開発環境は問題なし、サーバーにアップしたら動かず。

すぐに解決策を見つけたので、深追いはしていない。（深追いしても分かるのか微妙…）