AngularJS でブラウザの「戻る」ボタン(バックボタン)のクリックを検出する方法

Onsen UI を使ってウェブサイト(というよりもほぼアプリ)を開発中なのですが、ブラウザのバックボタンを押されたタイミングを検知したいと思ったのですが、あいにくそのようなイベントは用意されていません。

Onsen UI は AngularJS の上に作られたフレームワークなのですが、以下のようにすれば拾えるようです。

むむむ。Stack Overflow で見つけたんですが、コードを見ても、何でこれでブラウザバックを取得できるのか、よく分かりません。

ちょっとくやしいので、各変数の値をコンソールに書き出して、動きをモニターしてみました。

ページ上のリンクやボタンをクリックしてページを遷移させると、まず「$location.path()」の値が変化し、ページの遷移が完了した後に「$locationChangeSuccess」が更新される様子が見て取れました。

一方、ブラウザのバックボタンでページが遷移する場合には、これが逆の順番になるようです。まず「$locationChangeSuccess」が更新され、その後に「$location.path()」の値が変化します。

そのタイミングの違いを利用したのが、上のコードということになります。なるほど。

ところでこのコードでは、$rootScope に actualLocation というプロパティを追加してロケーション情報を保持しているのですが、わざわざ $rootScope を汚さなくても、コントローラ内のローカル変数に保持しとけば十分じゃないの? などと思ったりするのですが、何か理由があるのかな?

また時間があるときに検証してみたいと思います。

会社員(営業マン)してる時に勝手に会社の通販サイトを作って(HTMLからプログラミングまで全部自前)20年程運営していました。

今は独立してホームページに関するお仕事をしています。一般的なサイト制作はもちろんのこと、複雑なショッピングカートの制作までこなします。さらに、売れる通販サイトのノウハウを駆使して、サイト運営のお手伝いをいたします。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする