history.back() 失效主因是 history.length ≤ 1，需先判断再调用；spa 应用须用路由库方法（如 router.back()、navigate(-1)）避免绕过守卫；webview 和 iframe 场景需特殊处理。
history.back() 点击没反应，先查 history.length 是否 ≥ 2
多数“返回按钮失效”不是代码写错，而是浏览器根本没有上一页可退——比如用户从书签、微信外链或新标签页直接打开当前页。history.length 返回的是当前会话中所有历史条目数（含当前页），所以只有 history.length > 1 才能安全调用 history.back()。否则调用后静默失败，控制台也不报错。
实操建议：
- 不要直接写 onclick="history.back()"，漏掉 window. 前缀在某些沙箱环境会报 ReferenceError: history is not defined
- 推荐写法：onclick="if (window.history.length > 1) { window.history.back(); } else { window.location.href = '/'; }"
- 注意：history.length 在 Chrome 隐私模式下恒为 1，且无法区分 iframe 或 pushState 插入的记录，仅作体验层兜底，不能替代业务判断
SPA 项目里硬调 history.back() 会导致白屏或守卫失效
Vue Router、React Router v6+ 等路由库接管了 URL 更新和组件生命周期，直接调 history.back() 会绕过路由守卫、状态同步和 onBeforeRouteLeave 钩子，常见表现为：返回后页面空白、表单数据丢失、权限校验跳过。
实操建议：
- Vue 项目改用 router.back()（需确保 router 实例已注入）
- React Router v6 改用 navigate(-1)（来自 useNavigate）
- 检查是否误用了 router.replace() —— 它调的是 history.replaceState()，不增加历史长度，导致返回时直接跳到更早页面甚至 404
- SSR 场景下，首次 hydration 完成前 history.length 常为 1，返回逻辑需延迟到 mounted 或 useEffect 中执行
企业微信 / 微信 WebView 里返回按钮失效，得走 JS-SDK 流程
企业微信内置浏览器对导航控制有特殊机制：原生返回按钮点击后不会触发 popstate，也不会走 history.back()，而是发一个自定义事件 backbutton，必须通过 JS-SDK 注册监听，且需完成签名验证。
实操建议：
- 必须在 wx.ready 回调内注册 wx.onHistoryBack，否则静默失败
- 签名需服务端生成，前端传 url 和 timestamp 给后端，不可前端拼接
- 若未配置可信域名或 JS 接口安全域名，wx.config 会失败，后续所有 API 调用均无效
- iOS 微信 WebView 中，history.back() 响应可能延迟或卡顿，建议加 disabled 防重复点击，并在 wx.onHistoryBack 回调里手动恢复
iframe 页面里点返回，实际退的是 iframe 内部历史
浏览器为每个 iframe 维护独立历史栈。当用户在 iframe 内点击链接后，再点外层页面的返回按钮，浏览器默认优先退 iframe 的历史，而不是外层页面——结果就是“点了没反应”，页面卡在当前状态。
实操建议：
- 在 iframe load 后，用 iframe.contentWindow.history.pushState(null, '', location.href) 对齐外层历史栈
- 监听 window.onpopstate，并在回调中同步操作 iframe 的 contentWindow.history.go(-1)
- 更稳妥做法：禁用 iframe 自身导航，所有跳转由外层页面通过 postMessage 控制，避免历史栈分裂
- UniApp H5 中若嵌了 iframe，刷新后页面栈清空，此时左上角返回按钮行为不可控，必须重写 onBackPress 并 fallback 到 location.href
真正麻烦的从来不是“怎么写返回按钮”，而是“返回之后页面还能不能正常工作”——滚动位置、表单状态、路由守卫、iframe 同步、WebView 特性……每层都可能断掉一环。别只盯着 history.back() 能不能执行，得顺着用户点击后的整个导航链路，一节一节确认状态是否连续。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
