自动定时刷新页面 bookmarklet

背景

这是在我开发中遇到的一个问题,在测试环境中,我需要从外部系统的一个接口定时抓取数据,这个系统需要登录才能访问,登陆后如果一定时间没有操作则会自动退出登陆状态。为此,我需要一个简单的方式,在测试环境中自动定时刷新页面,从而避免因超时而导致的登录失效。

介绍

于是,我写了一个简单的 Bookmarklet 来完成这个工作,Bookmarklet 是一种保存在浏览器书签中的 JavaScript 代码片段,可以为网页添加额外功能。用户只需将该工具的代码添加到书签栏中,点击即可开始定时刷新当前页面。这种方式简单易用,非常适合需要长时间在线的测试工作。

技术实现

Bookmarklet 的核心是一段 Javascript 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let timeout = parseInt(prompt("Set timeout [s]"), 10);
const current = location.href;

if (timeout > 0) {
setTimeout(reload, 1000 * timeout);
}

function reload() {
setTimeout(reload, 1000 * timeout);
const iframeHTML = `<iframe src="${current}" style="width: 100%; height: 100%; border: none;"></iframe>`;
document.open();
document.write(iframeHTML);
document.close();
}

它将当前页地址作为 iframe 重写到页面中,并设置定时器动态刷新

压缩成一行

1
javascript:(function(){let timeout=parseInt(prompt("Set timeout [s]"),10);const current=location.href;if(timeout>0){setTimeout(reload,1000*timeout);}function reload(){setTimeout(reload,1000*timeout);const iframeHTML=`<iframe src="${current}" style="width: 100%; height: 100%; border: none;"></iframe>`;document.open();document.write(iframeHTML);document.close();}})();

这段代码利用 setInterval 方法每隔指定时间(例如5分钟)自动刷新当前页面。用户可以根据自己的需求调整 interval 的值,以适应不同的测试环境。

https://codepen.io/z4none/pen/MYgJYpY

embed

自动定时刷新页面 bookmarklet

https://www.z4none.me/auto-refresh-bookmarklet/

作者

zi

发布于

2024-12-16

更新于

2024-12-16

许可协议