禁用<meta http-equiv="refresh">做自动跳转，因其不可控、无法感知用户状态、破坏bfcache且Chrome95+已限制缓存；应优先用location.replace()实现条件跳转并精准控制历史栈。
别用 <meta http-equiv="refresh"> 做自动跳转——它不可控、无法感知用户状态、破坏 bfcache、Chrome 95+ 已限制其缓存行为，现代项目里基本该禁用。
为什么 <meta http-equiv="refresh"> 会出问题
浏览器一解析到这个标签就开始倒计时，不管 DOM 是否就绪、表单有没有正在输入、页面是否在后台标签页里。它不检查 document.activeElement，也不理会 document.hidden，更不会等你 fetch 完数据再决定要不要跳。
- 刷新后页面历史栈被污染，
history.back()可能跳错页 - SEO 友好性差，爬虫可能抓取到跳转中状态或直接放弃
- 无障碍访问（a11y）支持弱，屏幕阅读器难以同步节奏
- 无法取消或暂停，一旦写死就只能等时间到
location.href 和 location.replace() 的区别在哪
两者都能跳转，但语义和历史记录处理完全不同。
-
location.href = "https://example.com"：新增一条历史记录，用户能点「返回」回到原页 -
location.replace("https://example.com")：替换当前历史项，不留下跳转前的记录，适合登录后跳首页、404 页跳主页等场景 - 注意：如果目标 URL 是相对路径（如
"./dashboard.html"），必须确保路径解析正确，否则可能跳到错误域名下
如何用 JavaScript 实现带条件的跳转
核心是把跳转逻辑收归 JS 控制，而不是交给 HTML 元素硬编码。
立即学习“前端免费学习笔记（深入）”；
- 先判断是否允许跳转：
if (document.activeElement?.matches("input, textarea, select")) return; - 监听页面可见性：
document.addEventListener("visibilitychange", () => { if (document.hidden) clearTimeout(timer); }); - 加防抖或节流：避免网络波动导致多次触发跳转
- 跳转前发一次轻量请求确认状态，比如
fetch("/api/redirect-check", { method: "HEAD" })，返回 200 再执行location.replace()
iframe 里跳转 parent 页面要注意什么
跨域 iframe 下 window.parent.location.href 会被浏览器静默拦截，不报错但无效。
- 同域时可用：
window.parent.location.href = "/new-page" - 跨域时必须由 parent 主动监听子 iframe 的
postMessage，再自行跳转 - 不要用
window.top.location强刷，Safari 对 sandbox iframe 有额外限制 - 若需兼容旧环境，可 fallback 到
window.open(url, "_top")，但会新开窗口或覆盖当前 tab
真正麻烦的不是怎么跳，而是「什么时候不该跳」——用户正编辑表单、刚提交订单、切到其他标签页又切回来……这些状态全得靠 JS 感知，<meta> 标签一个都做不到。
