【議題】
mobile safariにおいて、ブラウザの戻るボタンを無効化したい(対象OS:iOS7)
【調査結果】
真の意味において無効化(ボタンが押せないor押しても無反応)は実現不可能
【対応策】
擬似的に無効化させる(戻るボタン押下にて画面遷移後、元の画面に戻る)
[ポイント①] 以下の3つの仕様を利用する
※ブラウザの戻るボタンを押下したタイミングで呼ばれる、
『押下時点でactiveな画面のwindow.onunloadファンクション』
※一つ前のページへ戻るJavaScript関数『history.back()』
(= 一般的なブラウザの戻るボタンを押したときと同じ動作をします)
※一つ先のページへ遷移するJavaScript関数『history.forward()』
(= 一般的なブラウザの進むボタンを押したときと同じ動作をします)
[ポイント②] ブラウザの戻るボタン押下時のMobile Safariの仕様を理解する
※onloadイベント → 実行されない。
※onpageshowイベント → 実行される。
上記のポイントを踏まえて、以下のように実装を行いました。
//---------------------------------------------//
// ブラウザの戻るボタンを無効化したい画面.html //
//---------------------------------------------//
window.onunload = function() {
history.back(); // 一つ前のページへ戻る …①
}
//-----------------------------------------------------//
// ブラウザの戻るボタンにて表示される一つ前の画面.html //
//-----------------------------------------------------//
window.onload = function() {
…ページが読み込まれた時に行う処理を記述(通常表示時の処理を記述する)
}
window.onpageshow = function() {
history.forward(); // 一つ先のページへ遷移する
// …①により当ファンクションが呼び出されるため、ここで元の画面へ遷移する処理を行う
}
以上の方法により、ブラウザの戻るボタンを無効化(と同様の動作を実現)致しました。