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

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

プログラミング
この記事は約 4 分で読めます。 24,079 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で企画・デザイン・ライティング・マーケティングを担当。小さい頃から絵を描くのが好きでデザイナーへ。現在はモノづくり、コトづくり、ヒトづくりでクライアントや世の中により良い影響を与えることが目標。趣味は絵、カメラ、旅行、アウトドア。

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

  • 【html】selectタグの最初のoption(選択してください)を選ばせない方法

  • 【コピペでOK】期間を指定して表示・非表示するPHP関数

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

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

関連記事

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

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

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

  • 教師ありの機械学習(AI)プログラムを使用して、与えられた文章が何の言語なのか判定する

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

  • フリーランスエンジニアが実際に使っている便利なフリーソフトツール2020