1. ホーム
  2. javascript

Angularを使用してブラウザのバックボタンクリックイベントを検出するには?

2023-07-23 05:12:43

質問

ユーザーがブラウザの履歴の戻るボタンを使ってページに入ったことを検出することは可能でしょうか?できればangular.jsを使用してこのアクションを検出したいです。

angularのルーティングは使いたくありません。ユーザーがフォームを送信し、サーバーへの送信とリダイレクトが成功した後、ユーザーがブラウザのバックボタンを使用してフォームに戻った場合にも動作する必要があります。

どのように解決するのですか?

Angularを使った解決方法を紹介します。

myApp.run(function($rootScope, $route, $location){
   //Bind the `$locationChangeSuccess` event on the rootScope, so that we dont need to 
   //bind in induvidual controllers.

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

   $rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLocation) {
        if($rootScope.actualLocation === newLocation) {
            alert('Why did you use history back?');
        }
    });
});

私はこれをキックスタートさせるためにランブロックを使っています。まず、$rootScope.actualLocationに実際の場所を保存し、次に$locationChangeSuccessをリッスンして、それが起こったときにactualLocationを新しい値で更新しています。

rootScopeで、位置パスの変更を監視し、新しい位置がpreviousLocationと同じであれば、$locationChangeSuccessが発生しなかったので、ユーザーが履歴を使用したことを意味します。