サイトを作っていると、たまに「前のページに戻ってほしくない時」というのが出てきます。

そんな時に使える「履歴を残さずに遷移させる方法」についてのメモです。

といってもかなり前からある手法ですので知ってる人も多いかもしれませんが…。

最近使うことが多いので忘れないように書いておきます。

履歴を残さずに遷移させる方法

やり方は非常に簡単で、普通のリンクをちょっと書き換えるだけでOKです。

つまり、普通のリンクの後ろに、

 onClick=”location.replace(‘（hrefと同じ内容）’); return false;”

を追加してあげるだけでOKです。

仕組みについて

見ての通り、JavaScriptを利用して実現しています。

リンクをクリックすると、JavaScriptの「onClick」が発動し、「location.replace()」を使って遷移します。

この方法ですと、ブラウザに履歴が残りませんので、戻るを押した場合、今いるページのもう１つ前のページに戻るようになるわけですね。

詳しいことはわかりませんが、「replace」という名前から察するに、おそらく新しいページに「移動」するというよりは、現在のページを新しいページに「置き換える」、つまり、厳密には移動しないで中身だけが変わっているのではないかな？と思います。多分ですけどね。

因みに最後に「return false;」を付けてそもそものリンク自体は無効化しておかないと、そちらも動作して普通に遷移してしまいますので忘れずに付けておきましょう。

これ自体は、hrefの中身を「#」や「 javascript.void(0);」にしておけば本来のリンク部分は動作しませんが、これだとJavaScriptが無効化されている環境ではリンク自体が機能せず、移動できなくなってしまいますので、hrefの中身も同じリンク先に指定しておいたほうがユーザーには優しいかなと思います。

jQueryでやってみる

作成するリンクが１つだけならいいのですが、複数ある場合は地味に大変ですよね。

そんなときは、jQueryでやってしまうのが手っ取り早いです。

特定のページの全てのリンクに対し、履歴を残させない場合は、対象となるページで

とすればOKです。（もちろん事前にjQueryをロードしておく必要があります）

また、一部のリンクだけなんだけど、複数あるんだよなぁ…って場合は、

 みたいにして、対象リンクに「no_history」クラスを付けてあげればOKです。

JavaScriptだけで複数リンクにさくっとやりたい場合

一応 jQuery を使わずに JavaScriptだけでもなんとか出来ないか考えてみました。

まずは、 function を作成します。

 そして今回は、リンクはこのように書き換えます。

先程はonClickで直接そこに書かれたコードを実行していますが、今度は関数を呼び出してるわけですね。

呼び出す時のポイントとしては、

• 引数に this を指定する
• onClickの中に return false; を書く

です。

そして return false; についてですが、 JavaScriptそのものについてはあまり詳しくないので理由はわかりませんが、jQueryのときのように、関数内に return false; を書いても機能しませんでしたのでこちらに書いてます。

注意点

いずれの方法もJavaScriptを利用して実現していますので、JavaScriptが使えない環境では当然利用できません。（ただし、先程も書いたように、JavaScriptが機能しない環境では普通にリンクとして動作しますので、遷移自体はできますが、この場合は履歴にも残るため戻れてしまうことに注意して下さい）