Quantcast
Channel: パークのソフトウエア開発者ブログ|ICT技術(Java・Android・iPhone・C・Ruby)なら株式会社パークにお任せください
Viewing all articles
Browse latest Browse all 138

mobile safariにおけるブラウザの戻るボタン無効化方法

$
0
0

【議題】
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(); // 一つ先のページへ遷移する
// …①により当ファンクションが呼び出されるため、ここで元の画面へ遷移する処理を行う
}


以上の方法により、ブラウザの戻るボタンを無効化(と同様の動作を実現)致しました。


Viewing all articles
Browse latest Browse all 138

Trending Articles