Pocket

ブラウザバックをされたときに条件によって、ブラウザバックさせないような対応が必要となり、HTML5から追加されたhistoryAPIなるものを使ってみたのでメモとして残します。



historyAPIを使う


今回作成した全体のコードが以下になります。

See the Pen HistoryAPI sample by takuchan (@takuchan) on CodePen.



以下がコードについての簡単な説明になります。


ブラウザバックを検知するためには、window.onpopstateを使います。
ただし、このonpopstateは、表示しているページでの履歴がないと走らないので、
ページ表示時に無理矢理履歴を追加して、onpopstateでキャッチできるようにします。


履歴に追加には、history.pushState(state, title, url)を使います。
第一引数のstateは、history.stateに入るオブジェクト(履歴の内容や関連する情報)を指定します。
第二引数のtitleは、履歴(ページ)のタイトルを指定します。※2015年6月時点では使い道は無いようです。
第三引数のurlは、履歴のurlを指定します。nullを指定すると現在のページとなります。
今回は、ダミーとなる履歴を追加したいので、3つともnullを指定しました。


onpopstateの部分は、
bodyに指定されているclassを判断し、ブラウザバックさせるか別の処理をさせるが分岐しています。
ポイントとしては、ブラウザバックを一度行うとダミーで追加していた履歴を一つ消化するので、ブラウザバックさせたくない処理の場合は再度ダミーの履歴を追加しています。
このときに追加しないと、次にブラウザバックされたときにonpopstateが走らなくなってしまいます。

また、通常通りブラウザバックさせたいときは、onpopstateが走っている時点で履歴を一つ消化しているので、history.go(-1); として「一つ戻る」をさせれば期待通りのブラウザバックになります。

ただし、このonpopstateはブラウザバックでなく、href=’#top’のようなページ内リンクを押下したときも走ってしまうので、ページ内リンクを使う場合は追加の対応が必要になります。
今回は、aタグのリンクがクリックされたときにbodyに’alink’クラスを追加し、
そのクラスがあるかどうかで判断させる処理を追加しています。



まとめ

onpopstateの挙動に少しはまりましたが、思った通りの実装をすることができました。
ただし、HTML5 HistoryAPIはIE9以下には未対応となっていますので、
実案件などに使う場合は注意して使っていく必要があります。



今回は以上になります。


Pocket

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

Copyright © team naporitan All Rights Reserved.