如何用Ajax或JavaScript实现两个HTML页面周期性切换的车间看板

当然可以！而且实现起来超简单，完全不需要用到Ajax——毕竟你手里已经有两个现成的静态HTML页面了，只需要几行JavaScript就能搞定车间看板的周期性切换需求。下面给你两种实用方案，你可以根据自己的看板场景来选：

方案1：直接页面跳转切换 #

这种方式最简单，适合看板就是一个单独的浏览器窗口，直接切换整个页面的场景。你只需要在两个静态页面里分别添加一段定时器脚本就行：

在page1.html中添加： #

// 设置切换间隔，比如5分钟（300000毫秒），可按需调整
const switchTime = 300000;

// 到点自动跳转到page2.html
setTimeout(() => {
  window.location.href = 'page2.html';
}, switchTime);

在page2.html中添加： #

const switchTime = 300000;

// 到点自动跳回page1.html
setTimeout(() => {
  window.location.href = 'page1.html';
}, switchTime);

小提示：如果担心浏览器缓存旧页面，可以在跳转时加个时间戳参数，确保每次加载最新内容：

window.location.href = 'page2.html?t=' + Date.now();

方案2：iframe嵌入平滑切换 #

如果不想有页面跳转的闪烁感，更推荐这种方式——用一个主看板页面，通过iframe嵌入两个静态页面，定时切换iframe的src属性，视觉上更平滑：

创建主看板页面dashboard.html： #

<!DOCTYPE html>
<html>
<head>
    <title>车间看板</title>
    <style>
        /* 让iframe占满整个屏幕，去掉边框和内外边距 */
        body { margin: 0; padding: 0; overflow: hidden; }
        #boardFrame { width: 100vw; height: 100vh; border: none; }
    </style>
</head>
<body>
    <iframe id="boardFrame" src="page1.html"></iframe>

    <script>
        // 要切换的页面列表
        const pageList = ['page1.html', 'page2.html'];
        let currentPageIndex = 0;
        // 切换间隔，这里设为5分钟
        const switchInterval = 300000;

        // 定时切换页面
        setInterval(() => {
            // 循环切换索引
            currentPageIndex = (currentPageIndex + 1) % pageList.length;
            const frame = document.getElementById('boardFrame');
            // 加时间戳避免缓存（可选）
            frame.src = pageList[currentPageIndex] + '?t=' + Date.now();
        }, switchInterval);
    </script>
</body>
</html>

这种方案的优势是所有控制逻辑都在主页面里，后期调整切换间隔或者添加新页面都更方便，而且切换过程没有页面刷新的闪烁，体验更好。

注意事项： #

• 确保所有页面文件在同一个目录下，或者路径设置正确（比如页面在子文件夹里，就写./pages/page1.html这种相对路径）；
• 如果看板是在浏览器中全屏运行，记得把浏览器设置成全屏模式（按F11），避免工具栏干扰；
• 切换间隔可以根据实际需求调整，比如1分钟就是60000毫秒，10分钟就是600000毫秒。

内容的提问来源于stack exchange，提问作者Attila Vincze