如何使用角度檢測瀏覽器後退按鈕單擊事件？

Question

是否有可能通過使用瀏覽器中的歷史記錄按鈕來檢測用戶是否進入了頁面？最好我想用angular.js檢測這個動作。

我不想使用角度路由。如果用戶提交表單，並且在成功提交給服務器並重定向之後，應該也可以工作，如果用戶使用瀏覽器的後退按鈕返回到表單，也應該是可能的。

Answer 1

以下是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未被觸發，這意味着用戶已使用歷史記錄。

Answer 2

JavaScript有一個本機歷史對象。

window.history 

查看MDN獲取更多信息; https://developer.mozilla.org/en-US/docs/DOM/window.history?redirectlocale=en-US&redirectslug=window.history

不知道它在多瀏覽器支持壽上有多好。

更新

似乎什麼我上面叫僅供壁虎式的瀏覽器。

對於其他瀏覽器嘗試使用history.js; https://github.com/browserstate/history.js

Answer 3

按下後退按鈕時，角火災只$ routeChangeStart事件，$ locationChangeStart沒有被解僱。

Answer 4

如果你想更精確的解決方案（檢測前進和後退）我延長了Bertrand交付的解決方案：

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


$rootScope.$watch(function() {return $location.path()}, function (newLocation, oldLocation) { 

    //true only for onPopState 
    if($rootScope.actualLocation === newLocation) { 

     var back, 
      historyState = $window.history.state; 

     back = !!(historyState && historyState.position <= $rootScope.stackPosition); 

     if (back) { 
      //back button 
      $rootScope.stackPosition--; 
     } else { 
      //forward button 
      $rootScope.stackPosition++; 
     } 

    } else { 
     //normal-way change of page (via link click) 

     if ($route.current) { 

      $window.history.replaceState({ 
       position: $rootScope.stackPosition 
      }); 

      $rootScope.stackPosition++; 

     } 

    } 

}); 

Answer 5

我知道這是一個老問題。無論如何:)

貝瑪的答案看起來不錯。但是，如果你想使之與「正常」的網址的工作（不散列我猜的），你可以比較，而不是由$location.path()返回一個絕對路徑，：

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.absUrl(); 
    });  

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

Answer 6

我的搜索解決方案這個問題是

app.run(function($rootScope, $location) { 
    $rootScope.$on('$locationChangeSuccess', function() { 
     if($rootScope.previousLocation == $location.path()) { 
      console.log("Back Button Pressed"); 
     } 
     $rootScope.previousLocation = $rootScope.actualLocation; 
     $rootScope.actualLocation = $location.path(); 
    }); 
}); 

Answer 7

對於ui路由，我使用下面的代碼。

內App.run()，使用

$rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) 
{ 

    if (toState.name === $rootScope.previousState) 
     { 
      // u can any 1 or all of below 3 statements 
     event.preventDefault(); // to Disable the event 
     $state.go('someDefaultState'); //As some popular banking sites are using 
     alert("Back button Clicked"); 

     } 
else 
     $rootScope.previousState= fromState.name; 
    }); 

您可以在 '$ stateChangeSuccess' 事件得到'previousState的價值還喜歡如下如果`你想要的。

$rootScope.$on("$stateChangeSuccess", function (event, toState, toParams, fromState, fromParams) 
    { 

     $rootScope.previousStatus = fromState.name; 
    });