AngularJS添加到浏览器历史记录中，无需重新加载页面，也没有HTML5推送状态

AngularJS add to browser history without page reload and without HTML5 pushstate

本文关键字：加载 状态 HTML5 历史 浏览器 添加 记录 新加载 AngularJS      更新时间：2023-09-26

我有一个搜索页面，允许用户向下钻取类别和/或输入搜索词。我想让用户能够使用后退按钮撤消这些操作。使用 AngularJS，我怎样才能让此页面为每个操作的浏览器历史记录添加条目。我不能使用 HTML5 pushstate。

我发现我可以通过更改查询字符串参数来做到这一点，而无需使用有关重新加载页面的答案 重新加载页面 从这里：

$routeProvider
  .when('/items', {
    controller: 'ItemsCtrl',
    templateUrl: '/templates/items',
    reloadOnSearch: false
  },
  ...
);

然后，从相同的答案中，使用以下方法设置查询字符串：

$location.search('id', 123);

最后使用此处的答案检测路线变化：

$scope.$on('$routeUpdate', function(){
  $scope.sort = $location.search().sort;
  $scope.order = $location.search().order;
  $scope.offset = $location.search().offset;
});
您可以使用

$locationProvider.html5Mode(false) 关闭 HTML5 模式。

然后只需使用像 <a href="#!/search">Search</a> 这样的 hashbang 网址，它们将被添加到浏览器的历史记录中。

我不相信在不使用HTML5 pushstate的情况下（至少在不实际更改当前位置的情况下）将条目添加到浏览器历史记录中。

MDN 页面讨论了 pushstate 的引入以及它如何启用这个新功能（这意味着这在以前是不可能的）：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

编辑：如果您无法使用 HTML5 pushstate 的原因是因为浏览器支持，请参阅此 polyfill：https://github.com/browserstate/history.js

连同下面的重新加载OnSearch代码来跟踪位置更改事件对我有用。 

$scope.$on('$locationChangeSuccess', function () {
      $scope.sort = $location.search().sort;
      $scope.order = $location.search().order;
      $scope.offset = $location.search().offset;
   });

虽然它可能对某人有所帮助。

相关文章：