【javascript】【スマートフォン】ブラウザーバックでメニューを閉じる操作

【javascript】【スマートフォン】ブラウザーバックでメニューを閉じる操作Web開発者の備忘録スマートフォン対応のウェブサイトでよくあるメニューの開閉。
画面が狭いからコンテンツ部分に重ねるかたちでメニューなど出すのは仕方ないですが。
そのメニューを閉じる時に「閉じる」「メニュー外をタップ」といった操作が正直めんどくさい。
特に Androidスマートフォンを使われている人にとっては、「戻る」ボタンを押したくなるのが人情というもの。
ということで、「戻る」ボタン、ブラウザーバックをした時にメニューを閉じる方法について、簡単に書いておきます。

ずばり


// メニューを開く処理を行った後に以下
history.pushState(null, 'menu', '?menu');

// メニューを閉じる「操作」を行った時
history.go(-1);

window.onpopstate = function(e) {
// メニューを閉じる処理をここに書く
};

簡単に説明します

基本はブラウザー履歴に対する操作です。
メニューを開いた時に、次のページに進んだことにして、メニューを閉じた時に前のページに戻したことにする、です。

pushState() で、1ページ進んだことになります。
アドレスバーには、?menu が付与されますが、実際はページのリロードなどは発生しません。

history.go(-1)でブラウザーの履歴が1つ戻ります。
端末についている「戻る」ボタンなどでブラウザーバックした時も、 history.go(-1)と同じことが行われます。

history.go(-1)が起きると、それに対するイベントが発生しますが、それをキャッチするのが
window.onpopstate = function(e) { xxx }
です。

以上です

今回メニュー操作を例にしましたが。
他にも、ついつい「戻る」という操作をしたくなるインタフェースはあると思います。
そういったときにこういった一工夫をすることで、サイトの使い勝手は劇的に改善すると思います。