Javascriptでブラウザの「戻る」ボタンを押したらイベントを発動する方法を探る

Javascriptでブラウザの「戻る」ボタンを押したらイベントを発動する方法を探る

ショーケース・ティービーではいくつかのASPサービスをご提供させていただいているわけですが、ウェブサイトのトレンドに合わせて、各商品で大小様々なアップデートを実施し、そしてその時々のカスタマイズ対応を繰り返してご活用いただいております。
今回は久々に個人的に結構手こずった印象のあるカスタマイズ内容についてご紹介させていただきます。

まず要望はJavascriptだけで、ブラウザバックボタンを押した時に確認メッセージを表示させ、ユーザが了承することで初めて、本来のブラウザバックを起動させたいというものです。
つまりユーザにブラウザバックを思いとどまらせるための機能実装を要望されているということですね。

動作確認の対象

今回のカスタマイズ対象にしたのはAndroid端末、かつChromeブラウザです。なお、対象の識別はユーザエージェントで判断しました。ちなみに標準ブラウザでは確認メッセージを表示させなくとも良いとのこと。
調査したところ、標準ブラウザとして判断できるトリガーは以下の3点でした。

本来であればAndroid端末、かつChromeブラウザだけを対象とする、いわゆる “ホワイトリスト方式” を採用し、以下のような書き方でカスタマイズ対応ができれば良かったのですが……

下記の「標準ブラウザの例」を見る限りでは、なんと “Chrome” という文字列が入っていました。そのため、標準ブラウザとして判断できるトリガーで、さらにユーザエージェントを絞り込む必要が出てきたわけです。

標準ブラウザの例:
Mozilla/5.0 (Linux; U; Android 4.0.3; ja-jp; SC-02C Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

Mozilla/5.0 (Linux; Android 4.2.2; ja-jp; SC-04E Build/JDQ39) AppleWebkit/535.19 (KHTML,like Gecko) Version/1.0 Chrome/18.0.1025.308 Mobile Safari/535.19

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...