我试图找到一个解决方案，这是我能得到的最好的(但工作很棒，这是我在这里找到的最简单的解决方案)。

在我的情况下，我想回到历史上一个返回按钮，但如果用户打开的第一页是我的应用程序的子页，它会回到主页。

解决方案是，一旦应用程序被加载，我只是做了一个替换历史状态:

history.replaceState( {root: true}, '', window.location.pathname + window.location.hash)

这样，我只需要在返回之前检查history.state.root。如果是真的，我做一个历史代替:

if(history.state && history.state.root)
    history.replaceState( {root: true}, '', '/')
else
    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，这个解决方案将不起作用。在使用此解决方案之前，请查看文档以了解更多信息。

我的代码让浏览器返回一个页面，如果失败，它加载一个回退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);
}

这工作为我使用react，但可以在另一种情况下工作;当历史记录在第一页时(你不能返回)window.history.state将为null，所以如果你想知道你是否可以返回，你只需要:

if (window.history.state == null) {
   //you cannot go back
}

文档:

的历史。状态属性返回表示位于的状态的值 历史堆栈的顶端。这是一种看待国家的方式 而不必等待popstate事件。

下面的解决方案将导航回来，并告诉是否发生了导航:

async function goBack() {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => reject('nowhere to go'), 100);
    window.history.back();
    const onBack = () => {
      window.removeEventListener('beforeunload', onBack);
      window.removeEventListener('popstate', onBack);
      clearTimeout(timer);
      resolve(true);
    };
    window.addEventListener('beforeunload', onBack);
    window.addEventListener('popstate', onBack);
  });
}

// usage
await goBack().catch(err => console.log('failed'));

工作原理:

试着导航回去 添加事件监听器，在导航到另一个网站或同一网站上的另一个页面时触发(SPA网站等) 如果上述事件在100毫秒内没有发生，就可以推断出没有地方可以回去

注意goBack()是一个异步函数。

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

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加载子页面，所以我停止检查这个值在第一种情况下。