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

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

プログラミング
この記事は約 4 分で読めます。 175 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]商品購入画面でお届け日とお届け時間を非表示にする方法

関連記事

  • 文字コードとは一体何なのか?MacでCSVの文字コードをUTF-8に変換する

  • 【初心者web系エンジニア必見】挫折しない為のポイントとおすすめ学習サービスまとめ(初心者がWeb系エンジニアとして働くために大事なこと1)

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

  • 【無料】VPSでLet’s EncryptのSSL証明書の設定する(自動更新設定)

  • 会員サイトで、特定のディレクトリ内にアクセス制限をかける

  • VPSサーバーの構築 第2回 CentOS7 apache MariaDB PHP7 2018