html自动跳转指定页面

你写了个登录页，自动指定用户输完密码点按钮，跳转结果页面刷新了，页面人还杵在原地。自动指定这体验太烂了。跳转HTML里其实有个最土但最稳的页面办法——meta refresh，一行代码搞定跳转，自动指定连JavaScript都不用碰。跳转

直接看代码。页面在<head>里塞这么一行：

<meta http-equiv="refresh" content="5; url=https://example.com">

数字5是自动指定秒数，等5秒自动跳到后面那个URL。跳转把5改成0就是页面立刻跳，几乎无感。自动指定我见过不少老系统还在用这招做支付成功后的跳转回跳，稳得一批，页面浏览器兼容性从IE6到Chrome 120全认。

不过有个坑你得注意。如果目标页面是HTTPS，而当前页面是HTTP，有些浏览器会拦一下，提示“即将离开安全连接”。这时候别慌，不是代码错了，是浏览器在耍小性子。解决办法是让当前页面也走HTTPS，或者干脆用JS的location.replace()，那个不会留下历史记录，用户按返回键也回不来，适合表单提交后的场景。

另一个细节是url别写相对路径。写url=/dashboard这种，浏览器会以当前域名拼全，但如果你的站点部署在子目录下，比如https://site.com/app/，那/dashboard会跳到根域名的dashboard，直接404。我吃过这个亏，后来一律写绝对地址，或者用./dashboard.html这种相对当前路径的写法。

还有种情况，你想跳转但得先告诉用户“3秒后自动进入”，这时候别只用meta，得配合页面上的文字提示。但meta的秒数是写死的，你没法在页面里动态改。想倒计时显示，就得用JS：

<script> let t = 3; const el = document.getElementById('count'); const timer = setInterval(() => {  t--; el.textContent = t; if (t <= 0) {  clearInterval(timer); location.href = 'https://example.com'; } }, 1000); </script>

这段代码放<body>末尾就行，id="count"的标签会显示剩余秒数。说实话，纯meta refresh做不了倒计时，但胜在简单——你连JS都不用写，静态页面扔到服务器上就能跑。

最后说个反直觉的事：自动跳转不一定非得是整页刷新。你要是只想让某个iframe里的内容跳走，meta refresh也能用，在<iframe>标签里加src属性指向一个带meta refresh的临时页面就行。但这样容易造成嵌套混乱，调试时特别头疼。我建议能整页跳就别玩局部，除非你明确知道自己在干嘛。

写代码的人总爱追求炫酷，但跳转这种基础操作，越简单越不容易出错。下次看到用户卡在页面不动，先检查meta写没写对，再怀疑JS。八成问题出在URL写错或者协议不一致上。