最快实现跳转是用,纯HTML、零JS、兼容老IE;需放中,0秒立即跳转,相对路径推荐用/login.html而非./login.html。

用 meta http-equiv="refresh" 最快实现跳转
不需要 JavaScript,纯 HTML 就能搞定。浏览器原生支持,兼容性极好(包括老 IE),适合部署后临时重定向或维护页跳转。
在 index.html 的 里加这行:
<meta http-equiv="refresh" content="0; url=/login.html">
注意点:
-
content值格式是"秒数; url=目标地址",0表示立即跳转 - 目标路径建议用相对路径(如
/login.html)或完整 URL(如https://example.com/app/),避免用./login.html,否则可能因当前 URL 路径层级出错 - 这个标签会被搜索引擎识别为跳转信号,但不传递 SEO 权重,仅作临时用途
用 window.location.href 跳转更可控
适合需要判断条件、延迟执行、或记录日志的场景。比如用户已登录就跳首页,未登录则跳登录页。
立即学习“前端免费学习笔记(深入)”;
在 index.html 的 底部或 <script></script> 标签中写:
<script>
// 立即跳转
window.location.href = '/dashboard.html';
// 或带简单判断
// if (localStorage.getItem('token')) {
// window.location.href = '/dashboard.html';
// } else {
// window.location.href = '/login.html';
// }
</script>
注意点:
- 不要用
window.location.replace()除非你明确不想让用户点「返回」回到index.html—— 它会从历史栈删掉当前页 - 如果跳转逻辑依赖 DOM 加载完成,需包裹在
DOMContentLoaded或把 script 放在 body 底部 - 某些安全策略(如 strict CSP)会禁止内联 script,此时需外链 JS 文件并确保其被允许执行
服务端跳转比前端跳转更可靠
如果你控制服务器(如 Nginx、Apache、Vercel、Cloudflare Pages),优先在服务端配置跳转。它更快、不依赖 JS、无白屏、且对爬虫友好。
常见配置示例:
- Nginx:
location = /index.html { return 302 /app.html; } - Vercel:
vercel.json中加{"redirects": [{"source": "/index.html", "destination": "/app.html"}]} - GitHub Pages 不支持服务端跳转,只能靠前端方案
服务端跳转的 HTTP 状态码建议用 302(临时)或 301(永久),别混用 —— 301 会被浏览器缓存,改错后难调试。
跳转时容易忽略的两个细节
一是路径解析问题:浏览器对 url 参数的解析基于当前页面 URL,不是 HTML 文件物理位置。比如访问 https://site.com/sub/ 时打开 index.html,其中 url="login.html" 会跳到 https://site.com/sub/login.html,而非根目录。
二是移动端 WebView 场景:某些嵌入式 WebView(如微信内建浏览器、App 内置浏览器)可能拦截或延迟执行 meta refresh,此时必须用 window.location.href 才稳定。
真正上线前,务必用不同设备和网络环境实测跳转路径是否符合预期 —— 特别是带查询参数或哈希的 URL,稍不注意就会丢参或跳错。


















