如何用JavaScript实现点击返回按钮回到上一窗口页面，现有代码不生效如何解决

失效原因 #

window.history.back() 依赖浏览器的历史记录栈，触发失效绝大多数是以下3种场景：

• 点击「Go detail」时是新开标签/窗口打开的详情页，新页面的历史栈只有当前页，不存在可回退的上一条记录
• 「Go detail」的跳转逻辑用了 location.replace() 方法，该方法不会把前序页面加入历史栈
• 内联onclick绑定存在作用域问题，导致goBack方法未被正确触发

对应解决方案 #

方案1：适配新开标签页场景（最常用） #

如果你的「Go detail」是新开窗口打开详情页，直接回退历史记录本身就不成立，改为优先回退、无历史记录时关闭当前页即可：

function goBack() {
  // 历史记录数大于1说明有可回退的记录，否则直接关闭当前页
  window.history.length > 1 ? window.history.back() : window.close();
}

方案2：修复跳转逻辑 #

如果是跳转时用了location.replace导致无历史记录，把跳转代码改为普通跳转即可：

// 把原来的 location.replace('你的详情页地址') 替换成下面的写法
location.href = '你的详情页地址';

方案3：改用事件绑定避免内联onclick问题 #

如果是内联绑定失效，去掉HTML里的onclick属性，用事件监听绑定更稳妥：

<!-- 修改后的HTML按钮 -->
<button id="back">BACK</button>

// 对应的JS代码
document.getElementById('back').addEventListener('click', goBack);

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