实现带Fallback的页面返回按钮：无历史页时跳转至指定页面

你可以通过判断浏览器历史记录长度，来决定点击按钮后是返回上一页还是跳转到预设主页面，具体实现方案如下：

方案一：分离JS逻辑（推荐） #

先编写HTML按钮：

<a href="#" onclick="handleBack()">Go back</a>

再添加对应的JavaScript函数：

function handleBack() {
  // 当历史记录仅包含当前页面（无浏览历史）时，跳转主页面
  if (window.history.length <= 1) {
    window.location.href = '/your-main-page'; // 替换为你的主页面实际路径
  } else {
    // 存在历史记录时，返回上一页
    window.history.back();
  }
}

方案二：内联简化写法 #

如果希望把逻辑直接写在标签内，可使用三元表达式简化：

<a href="#" onclick="window.history.length <= 1 ? window.location.href='/your-main-page' : window.history.back()">Go back</a>

关键说明 #

• 所有主流浏览器对history.length的初始值处理一致：直接打开页面时长度为1，从其他页面跳转过来时长度大于1，因此这个判断逻辑可靠。
• 记得将/your-main-page替换为实际的主页面路径，比如/index.html或网站根路径/。

内容的提问来源于stack exchange，提问作者JoshGarrison