【ここは記事の3ページ目】
※もし、このページへ「元に戻れないリンク」を使って訪れた場合は、ブラウザの「戻る」ボタンをクリックしてみてください。 先ほどのページには戻れずに、その1つ前に表示していたページに直接戻ってしまうはずです。
元のページに戻れないリンクの仕組み
元のページに戻れない理由は、ブラウザの履歴に残らないからです。
ここで移動のために作ったリンクは、「現在表示しているページの情報をブラウザの履歴に残さないようにしたリンク」です。 この特殊なリンクを使うと、「元のページ」には戻らずに「さらに1つ前のページ」に直接戻るようになります。
これを実現する方法はとても簡単で、JavaScriptで以下のように記述するだけです。
location.replace('移動先URL');
上記のようにreplaceメソッドを使うと、「現在のページ」を「指定したページ」と置き換えられます。 それによって、現在のページはブラウザの移動履歴から消える(=新しいページと置き換えられる)ため、後から戻ってくることができなくなります。
※消えるといっても、未訪問ページの扱いに戻るわけではありません。ページ移動の履歴から消えるだけです。
具体的な記述(リンク版)
リンクとして作る場合は、以下のように記述します。 (a要素で作る普通のリンクに、onclick属性を加えてそこにJavaScriptを記述します。)
<a href="移動先URL" onclick="location.replace('移動先URL'); return false;"> ~ </a>
●2カ所ある「移動先URL」には同じURLを記述して下さい。(herf属性の側にもURLを書くのは、JavaScriptが無効な環境でも正しくリンクとして機能させるためです。)
URLは「http://」から書いてもファイル名だけでも構いません。(普通にリンクを作る場合と同じように書けます。)
●また、onclick属性の値の最後に「return false;」の記述を忘れないように注意して下さい。 これがないと、場合によっては通常のリンクとしてしか機能しないことがあります。
具体的な記述(自動移動版)
自動的に移動させたい場合は、以下のように記述します。
<script type="text/javascript">
location.replace('移動先URL');
</script>
記述場所はhead要素内でもbody要素内でも構いません。このJavaScriptソースが読み込まれた瞬間に移動します。 (JavaScriptが無効な環境では何も起こりませんので、別途リンクも掲載しておきましょう。)
おわりに
今回は、元のページに戻れなくするリンクの作り方をご紹介いたしました。
移転メッセージの表示ページや、閲覧条件の確認ページなどのような、「戻っても意味がないページ」・「戻って欲しくないページ」などで使ってみて下さい。