ホームページ作成/リンクの表示・装飾 (HTML,CSS,JavaScript)

元のページに戻れないリンクを作る(3ページ目)

一度移動するとブラウザの「戻る」ボタンを使っても元のページには戻れないリンクを作ることができます。移転メッセージの表示や閲覧条件の確認ページなどのような「戻っても意味がないページ」などに活用できます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

【ここは記事の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が無効な環境では何も起こりませんので、別途リンクも掲載しておきましょう。)

おわりに

今回は、元のページに戻れなくするリンクの作り方をご紹介いたしました。
移転メッセージの表示ページや、閲覧条件の確認ページなどのような、「戻っても意味がないページ」・「戻って欲しくないページ」などで使ってみて下さい。

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます