1. TOP
  2. プログラミング
  3. コピペでOK!ブラウザの戻るボタンを禁止する方法[ jQuery / javascript ]

コピペでOK!ブラウザの戻るボタンを禁止する方法[ jQuery / javascript ]

プログラミング
この記事は約 4 分で読めます。 2,979 Views

コピペをするだけブラウザの戻るボタンを動作させなくする方法をご紹介します。

jQueryとjavascriptでブラウザの戻るボタンを禁止する方法

こちらのコードを<head>〜</head>などに記述することでブラウザの戻るボタンが効かなくなります。

html5のブラウザのみ対応する場合

html5でないブラウザも対応する場合

ソースコードの解説

通常はAのページからBのページに移動する際には当然ブラウザの履歴も

1.Aページ

2.Bページ

 

となりますが

こちらの記述をすることで

1.Aページ

Bページを一つ前に表示していたページとして履歴に追加

2.Bページ

というように

AのページからBのページに移動した際にBの履歴が挿入されます。

よって、Bのページで戻るボタンを押しても、Bページに移動するので
見た目上戻るが効かなくなったように見えます。

しかし当然ながら2回戻ってしまうとAページに戻ってしまいます。

そこで

も記述することで

1.Aページ

Bページを一つ前に表示していたページとして履歴に追加

2.Bページ

3.Bページ

戻る際に、Bページを一つ前に表示していたページとしてさらに履歴に追加

4.Bページ(戻る時に追加された履歴)

戻る際に、Bページを一つ前に表示していたページとしてさらに履歴に追加

5.Bページ(戻る時に追加された履歴)

…戻るたびにBページが追加されるので、何度戻るボタンを押してもBページが表示される

というように戻る際にもBページが挿入されるので、実質戻るボタンが無効化されたことになります。

html5対応のブラウザで解説しましたが、html5でないブラウザのソースも理屈は同じです。

制作のご依頼・ご相談はこちら

dainamoでは魅力的なWEBサイトや、アプリ、ツール、ポスター、パンフレット、チラシなど幅広く承っております。ご相談、見積もり、お問い合わせなど、お気軽にご連絡ください。

今すぐご相談・問い合わせをする

\ SNSでシェアしよう! /

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

ライター紹介 ライター一覧

エリー

エリー

dainamoで企画・デザイン・ライティング・マーケティングを担当。小さい頃から絵を描くのが好きでデザイナーへ。現在はモノづくり、コトづくり、ヒトづくりでクライアントや世の中により良い影響を与えることが目標。趣味は絵、カメラ、旅行、アウトドア。

この人が書いた記事  記事一覧

  • ボタンの2重クリックや連打を防止するJavaScript

  • IoT時代のデザインはどうあるべきか

  • コピペでOK!ブラウザの戻るボタンを禁止する方法[ jQuery / javascript ]

  • [EC-CUBE 3.0]商品購入画面でお届け日とお届け時間を非表示にする方法

関連記事

  • phpMyAdminの簡単にできるセキュリティ対策【Apache】

  • [EC-CUBE 3.0]商品購入画面でお届け日とお届け時間を非表示にする方法

  • エンジニアが知っておきたい、キャリアパスの種類と特徴

  • 【初心者向け】cron(クーロン)を使って、自動でプログラムを設定する

  • ぶっちゃけエンジニアに資格は必要ない!

  • 産業とデザインの歴史と遷移