Help us understand the problem. What is going on with this article?

HTML5 history apiで戻るボタン無効化

More than 3 years have passed since last update.

ブラウザバックを無効化したい要望が発生したので、history apiを用いてみました。

history apiの対応状況

http://caniuse.com/#search=history
↑こちら参照しました。

最近のブラウザだとほぼ対応しているので、ブラウザバック無効化したいとかあった場合は使ってもいいかもしれませんね。
※Androidだと4.0は非対応みたいです。

ブラウザバックの無効化

こちらの記事を参考にさせて頂きました!
ものすごく簡単にできました。

test.js
// 履歴にスタックしたかどうかのflag
var isHistoryPush = false;
(function() {
    if (history && history.pushState && history.state !== undefined) {
        // history イベントの監視
        window.addEventListener('popstate', function (e) {
            if (isHistoryPush) {
                alert('ブラウザでの戻るボタンは禁止されております。');
                history.pushState(null, null, null);
            }
        }, false);
    }
})();

// pushしたいタイミングで呼び出します
function pushHistory() {
    if (history && history.pushState && history.state !== undefined) {
        isHistoryPush = true;
        history.pushState(null, null, null);
    }
}

history.pushState(null, null, null);で、履歴にストックしています。

param 意味
第一引数 state オブジェクト形式で入れられます。ストックした履歴を識別したい時に入れるといいですね。
第二引数 title ページのタイトルをここで指定できます。
第三引数 url pushState()のイベントでURLを変更したい場合はここで指定します。null指定だと自分自身になります。

上記コードの例だと全てnullなので、単純に自分自身のページをストックするようになってます。

ブラウザの戻るボタンを実行すると、popstateのイベントが実行されます。
その中で、alertを表示。
さらにhistory.pushState(null, null, null);と自分自身をストックするようにする。
↑この部分不要だと思われますが、あるとブラウザの「進む」ボタンが無効になる。(why?)

その他注意点

こちらの記事を参考に、history apiを使う際の注意点があります。
引用させて頂いてます↓↓

  • History APIに対応していないブラウザ・端末がある
  • ファイル読み込み時に、popState(「進む」「戻る」をクリック(タップ)した際のイベント)を実行してしまうブラウザ・端末がある(想定外)
  • history.pushState(履歴を追加するメソッド) が使えても、history.state(履歴追加時にセットした情報) が使えない場合がある

という状況を踏まえて、コードに落とし込んでます。

  • History APIに対応していないブラウザ・端末がある
  • history.pushState(履歴を追加するメソッド) が使えても、history.state(履歴追加時にセットした情報) が使えない場合がある こちらは以下で対応。
if (history && history.pushState && history.state !== undefined) {
    // 対応している場合の処理
}
  • ファイル読み込み時に、popState(「進む」「戻る」をクリック(タップ)した際のイベント)を実行してしまうブラウザ・端末がある(想定外)
    ↑これはiOS8、9のSafariだと発生しました。

こちらは以下で対応。

// グローバル変数にします。
var isHistoryPush = false;

// このメソッドが呼ばれた時、フラグをONにします。
function pushHistory() {
    // 省略・・・
    // フラグをON
    isHistoryPush = true;
}

// popstateイベントでフラグをチェック
window.addEventListener('popstate', function (e) {
    if (isHistoryPush) {
        // 処理・・・・
    }
}, false);

という感じで出来ました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした