最简返回按钮用返回上一页即可，浏览器原生支持；若history.length≤1则静默失败，可加判断fallback至首页。
HTML里加个按钮调用 history.back() 就行
不需要额外引入库或框架，浏览器原生支持。最简写法就是绑定 onclick 事件，执行 history.back()：
<button onclick="history.back()">返回上一页</button>
注意：这个行为依赖浏览器历史栈。如果用户是直接打开该页面（比如从书签、新标签页进入），history.length 可能为 1，此时点按钮没反应，也不会报错 —— 这是正常表现，不是 bug。
- 想避免空白点击，可先判断：
if (history.length > 1) history.back(); -
history.back()等价于history.go(-1)，但语义更清晰 - 不要用
javascript:void(0)或#做 href，容易触发滚动或重载
用 addEventListener 更可控
把逻辑抽离出来，方便加判断、埋点或统一处理异常：
<button id="back-btn">返回</button>
<script>
document.getElementById('back-btn').addEventListener('click', function() {
if (history.length <= 1) {
// 没有上一页时跳转到首页或关闭窗口
window.location.href = '/';
// 或：window.close();（仅限 script 打开的窗口）
} else {
history.back();
}
});
</script>
这种写法能明确区分「有历史」和「无历史」两种路径，避免用户误点后卡住。
- 移动端 Safari 对
window.close()限制严格，仅允许关闭 script 打开的窗口 - 如果页面是通过
location.replace()跳转来的，它不会留在 history 中，history.back()会跳过它 - 单页应用（如 Vue/React）中，
history.back()触发的是路由库的 popstate，不是原生跳转
history.back() 和 history.go(-1) 有啥区别？
基本没区别，都是让浏览器导航到上一个历史记录项。但细微差异会影响调试和兼容性：
-
history.back()是语义化方法，可读性好，所有现代浏览器都支持 -
history.go(-1)是通用跳转接口，go(n)支持任意整数偏移，但负数超出范围时静默失败 - IE8 及更早版本不支持
history.back()的某些触发方式（比如在 iframe 中调用），但极少遇到 - 两者都不刷新页面，也不重新发送 POST 请求（这点和
location.href = document.referrer不同）
别用 document.referrer 模拟返回
看到有人写 location.href = document.referrer 来“返回”，这很危险：
-
document.referrer是只读字符串，可能为空（比如从桌面快捷方式打开）或被隐私策略屏蔽（Firefox 隐私模式、Chrome Strict CSP） - 它不走 history 栈，点浏览器返回按钮时会断层，用户体验割裂
- 如果上一页是 POST 提交结果页，
referrer通常指向提交前的表单页，导致重复提交风险 - 不如老老实实用
history.back()，失败了再 fallback 到安全路径（如首页）
真正容易被忽略的点是：SPA 路由、PWA 缓存、以及 iOS Safari 的 back-forward cache（bfcache）会让 history.back() 表现不一致——比如页面状态没重置、监听器没重新绑定。这类问题得靠路由守卫或 pageshow 事件补救，不是按钮本身能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
