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

JavaScript
2016.03.14

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

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

app.run(['$rootScope', '$location', function($rootScope, $location) {

    $rootScope.$on('$locationChangeSuccess', function() {
        $rootScope.actualLocation = $location.path();
    });

    $rootScope.$watch(function() {
        return $location.path()
    }, function(newLocation, oldLocation) {
        if($rootScope.actualLocation === newLocation) {
            // ここに処理を書く
        }
    });

}]);

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

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

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

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

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

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

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

コメント

タイトルとURLをコピーしました