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

ブラウザバックを無効化したい要望が発生したので、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);

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