浏览器有后退和前进按钮。我想出了这个问题的解决办法。但它会影响浏览器的转发操作，并导致一些浏览器的错误。

它的工作原理是这样的:如果浏览器打开一个从未打开过的新url，历史。长度会变长。

你可以改变哈希值

  location.href = '#__transfer__' + new Date().getTime() 

要得到一个从未显示的url，然后历史。长度会得到真正的长度。

  var realHistoryLength = history.length - 1

但是，它并不总是工作得很好，我不知道为什么，特别是当url自动跳转很快。

我在我的项目中使用了一个片段:

function back(url) {
    if (history.length > 2) {
        // if history is not empty, go back:
        window.History.back();
    } else if (url) {
        // go to specified fallback url:
        window.History.replaceState(null, null, url);
    } else {
        // go home:
        window.History.replaceState(null, null, '/');
    }
}

供参考:我使用history. js来管理浏览器历史。

为什么要比较历史。2的长度?

因为Chrome的开始页面是浏览器历史记录中的第一项。

历史的可能性很少。长度和用户行为:

用户在浏览器中打开新的空选项卡，然后运行一个页面。历史。Length = 2，在这种情况下我们要禁用back()，因为user将转到空选项卡。 用户在新选项卡中通过单击前面某处的链接打开页面。历史。Length = 1，同样我们要禁用back()方法。 最后，用户登陆当前页面后重新加载几个页面。历史。长度> 2和now back()可以启用。

注意:当用户点击外部网站的链接后，没有target="_blank"时，我省略了大小写。

注2:文件。referrer是空的，当你打开网站输入它的地址，也当网站使用ajax加载子页面，所以我停止检查这个值在第一种情况下。

我的代码让浏览器返回一个页面，如果失败，它加载一个回退url。它还可以检测标签的变化。

当后退按钮不可用时，回退url将在500毫秒后加载，这样浏览器就有足够的时间加载上一页。在window.history.go(-1)之后加载回退url;会导致浏览器使用回退url，因为js脚本还没有停止。

function historyBackWFallback(fallbackUrl) {
    fallbackUrl = fallbackUrl || '/';
    var prevPage = window.location.href;

    window.history.go(-1);

    setTimeout(function(){ 
        if (window.location.href == prevPage) {
            window.location.href = fallbackUrl; 
        }
    }, 500);
}

你不能直接检查后退按钮是否可用。你可以看看历史。长度为>0，但如果在当前页之前还有页，这也是成立的。只有当history.length===0时，才能确定后退按钮不可用。

如果这还不够好，你所能做的就是调用history.back()，如果你的页面之后仍然被加载，返回按钮是不可用的!当然，这意味着如果后退按钮可用，则您刚刚导航离开了页面。你不允许取消onunload中的导航，所以你所能做的就是从onbeforeunload中返回一些东西，这将导致一个恼人的大提示符出现。这不值得。

事实上，用历史做任何事情通常都是一个非常糟糕的主意。历史导航是chrome浏览器，不是网页。添加“返回”链接通常会引起更多用户的困惑，而不是它的价值。

注意window.history.length，因为它还包括window.history.forward()的条目。

window。history。length可能有多于1个条目，但没有历史回溯条目。 这意味着如果你触发window.history.back()

解决方案

'use strict';
function previousPage() {
  if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
    window.history.back();
  }
}

解释

window.location.pathname会给你当前的URI。例如，https://domain/question/1234/i-have-a-problem会给出/question/1234/i-have-a-problem。请参阅有关窗口的文档。获取更多信息的位置。

接下来，调用split()将为我们提供该URI的所有片段。所以如果我们使用我们之前的URI，我们将会有像[""，"question"， "1234"， "i-have-a-problem"]这样的东西。有关更多信息，请参阅有关String.prototype.split()的文档。

这里调用filter()来过滤掉由反斜杠生成的空字符串。它基本上只返回长度大于1的URI片段(非空字符串)。所以我们会有像["question"， "1234"， "i-have-a-question"]这样的东西。这可以写成这样:

'use strict';
window.location.pathname.split('/').filter(function(fragment) {
  return fragment.length > 0;
});

有关更多信息，请参阅关于Array.prototype.filter()和析构赋值的文档。

现在，如果用户在https://domain/上尝试返回，我们不会触发if语句，也不会触发window.history.back()方法，这样用户就会留在我们的网站中。这个URL将等价于长度为0的[]，0 > 0为假值。因此，默默的失败。当然，如果您愿意，您可以记录一些内容或其他操作。

'use strict';
function previousPage() {
  if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
    window.history.back();
  } else {
    alert('You cannot go back any further...');
  }
}

限制

当然，如果浏览器不支持History API，这个解决方案将不起作用。在使用此解决方案之前，请查看文档以了解更多信息。