piapia123
zh

自动刷新代码生成

网络

所有处理都在浏览器本地完成,数据不上传服务器

输入
把文件拖到这里可直接载入
输出

生成让某个页面自动刷新的代码,六种形式一次给全:HTML 的 `<meta>` 标签、JavaScript 定时器(可选带倒计时显示)、服务器的 `Refresh` 响应头,以及 React / Vue 组件里的写法。 ⚠️ 这个工具不会刷新你正在看的这一页。 它只产出代码。这么做是有理由的:自己定时重载会毁掉你正在输的内容和已经出来的结果;间隔填错(想填 60 秒、填成 1)就变成对我们自己站点的请求循环;而且静态页面没地方存刷新间隔,重载后设置就丢了。 ⚠️ 地址校验不猜协议。 完整地址要以 `http://` 或 `https://` 开头,站内路径要以 `/` 开头,其余一律报错。别的工具(比如 URL 解析)会给裸域名补上 `https://`,这里不补 —— 这段代码会进你的项目,猜错一个协议就是猜错你的部署环境。 ⚠️ 间隔下限是 1 秒,而且小于 5 秒时会多一句提醒 —— 那种间隔看起来像页面坏了,还会给服务器不必要的压力。另外 `meta` 那种写法会破坏浏览器的后退按钮,页面以 POST 方式加载时也不生效,这些都在对应那一行的旁注里写着。

功能

  • 六种形式:`meta` 标签、JS 定时器、JS 带倒计时、`Refresh` 响应头、React、Vue
  • 不猜协议:完整地址与站内路径各自校验,写错就报错而不是替你补
  • 间隔下限 1 秒(`content="0"` 会变成无限刷新循环),过短时给出提醒
  • 每一行都带旁注,写清那种写法各自的坑(后退按钮、POST、清理定时器)
  • 地址里的引号按 JS 规则转义,生成的代码可以直接贴
  • 不联网、不上传

使用方法

  1. 填入要刷新的页面地址(或站内路径)
  2. 设置间隔秒数
  3. 选输出形式,或保留「全部给出」
  4. 点每一行右侧的按钮取走那一段代码

常见问题

`meta` 和 JavaScript 该选哪个?
看你更在意什么,两者各有代价: `meta` 更简单、JavaScript 被禁用时也有效,但它有两个已知问题 —— 会破坏浏览器的后退按钮(用户按后退会被立刻刷回来,等于退不出去),而且页面以 POST 加载时不生效。 JavaScript 更可控:可以显示倒计时、可以在刷新前先做点别的事、也可以用 `location.replace` 避免在历史记录里堆条目(这样后退键还能正常用)。代价是依赖 JavaScript。 一般的后台面板、监控看板用 JS 那种;只需要「过一会儿自己更新一下」的简单场景用 `meta`。
刷新间隔设多少合适?
至少 30 秒,最好 60 秒以上。 1~2 秒的间隔在真实页面上等于自己给自己发 DDoS —— 每个打开的标签页都在按那个频率打你的服务器,几个人同时开着就能看出来。 另外浏览器会对后台标签页的定时器降频(切到别的标签后,`setInterval` 可能被压到一分钟一次),所以设很短的间隔在后台也不会按你以为的频率跑。 要「有变化才更新」的话,正确做法是轮询一个轻量接口或者用 WebSocket / SSE,而不是整页重载 —— 整页重载会把页面上所有资源重新拉一遍。
为什么填 `example.com` 会报错?
因为不允许猜协议。`example.com/dashboard` 既可能是 `https://example.com/dashboard` 也可能是 `http://…`,而这段代码会进你的项目 —— 猜错一个协议就是一个指向错误地址的跳转。 所以这里只接受三种写法:以 `http://` 或 `https://` 开头的完整地址、以 `/` 开头的站内路径、以及以 `//` 开头的协议相对地址(沿用它所在页面的协议)。其余写法会报错并告诉你该补什么。 站内的 URL 解析 那个工具是会给裸域名补 `https://` 的 —— 那里只是「解析看看」,补错了没有后果;这里产出的是要部署的代码,性质不同。

相关工具