仅当它导致AngularJS中的相同单页应用程序时，如何显示后退按钮？答案

【问题标题】：How to show the back button only if it leads to the same single-page-application in AngularJS?仅当它导致AngularJS中的相同单页应用程序时，如何显示后退按钮？
【发布时间】：2014-05-24 19:38:20
【问题描述】：

我知道如何在 AngularJS 中实现返回按钮：How to implement history.back() in angular.js

而且我只想在 BACK 将我引导到同一个应用程序时显示它：

<a ng-click="back()" ng-show="isBackAvailable()">BACK</a>

如果 BACK 会指向其他页面，我希望隐藏它。

我当前的实现如下所示：

app.run(function($rootScope, $window) {
  var acceptableReferrers = ["http://127.0.0.1:9000/"];

  $rootScope.back = function() {
    $window.history.back();
  }

  $rootScope.isBackAvailable = function() {
    var result = _.contains(acceptableReferrers, document.referrer);
    console.log(result)
    return result;
  }
});

这不起作用。

当我将http://127.0.0.1:9000/ 粘贴到浏览器栏中时，document.referrer 是""（空字符串）。但是，如果我按照以下方式执行此操作： <a href="http://127.0.0.1:9000/#/search">now referrer will be correct</a>

请指教。

【问题讨论】：

您可以尝试使用$location.absUrl()，然后检查网址是否包含任何可接受的引荐来源网址
@callmekatootie - $location.absUrl() 尝试使用它但对我不起作用:(
你的意思是它不返回任何东西？
抱歉没有更准确。它总是返回我所在的当前 URL。它对我不起作用，因为它不能解决我的问题。

标签： javascript angularjs browser-history referrer

【解决方案1】：

document.referrer 返回上一页的整个 url，所以如果你想让你的函数工作，你不能检查它是否完全匹配。

也许可以尝试一些不太具体的方法，例如检查 document.referrer 是否有相同的主机名：

$rootScope.isBackAvailable = function() {
  var result = _.contains(document.referrer, window.location.hostname);
  console.log(result)
  return result;
};

【讨论】：

document.referrer 将在用户将 url 粘贴到地址栏中时为空。根据问题，这就是失败的原因。我认为这不会对此有所帮助。
这是一个单页应用程序，document.referrer 始终是http://127.0.0.1:9000/"，无论我的位置以及我在应用程序中点击了多少次。

【解决方案2】：

我不得不在 AngularJS 应用程序中解决同样的问题，我使用$window.history.length 来做出决定。当应用程序最初加载时，我将初始历史长度保存在一个变量中。单击后退按钮时，我将当前历史长度与初始长度进行比较。如果我当前的历史更大，我知道我至少可以回到我最初的起点。当前索引永远不会小于初始索引，因为它不可能“返回”到较低的索引并留在应用程序中。

这看起来像下面这样：

app.run(function($rootScope, $window) {
  var historyLength = $window.history.length;

  $rootScope.back = function() {
    $window.history.back();
  }

  $rootScope.isBackAvailable = function() {
    return $window.history.length > historyLength;
  }
});

【讨论】：