如何在网页看板中每30秒轮播展示网页？能否用JS/jQuery实现？

完全能用纯JavaScript搞定这个循环切换的网页看板，甚至不需要jQuery也能轻松完成。核心思路是用<iframe>在当前页面内加载目标网页，再通过定时器每隔30秒切换iframe的源地址，实现循环展示效果。

完整实现代码 #

<html>
<head>
    <style>
        /* 让iframe铺满整个页面，移除默认边框和页面边距 */
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        #dashboardFrame {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <!-- 初始加载Google页面的iframe -->
    <iframe id="dashboardFrame" src="https://google.com"></iframe>

    <script>
        // 定义需要循环切换的网址列表
        const targetUrls = ['https://google.com', 'https://youtube.com'];
        let currentUrlIndex = 0;
        const dashboardFrame = document.getElementById('dashboardFrame');
        const switchDelay = 30000; // 切换间隔：30秒（单位毫秒）

        // 切换页面的核心函数
        function switchToNextPage() {
            // 通过取模运算实现循环切换索引
            currentUrlIndex = (currentUrlIndex + 1) % targetUrls.length;
            // 更新iframe的源地址
            dashboardFrame.src = targetUrls[currentUrlIndex];
        }

        // 设置定时器，每隔30秒触发一次切换
        setInterval(switchToNextPage, switchDelay);
    </script>
</body>
</html>

关键细节说明 #

• <iframe>的作用：它能在当前页面内部加载外部网页，避免整个看板页面跳转，完美适配你的需求。
• 样式调整：CSS部分让iframe铺满整个视口，移除默认边框和页面边距，保证展示效果完整流畅。
• 循环逻辑：用(currentUrlIndex + 1) % targetUrls.length实现索引循环，当切换到最后一个网址后，会自动回到第一个。
• 定时器：setInterval会每隔30秒自动执行切换函数，不需要手动触发。

注意事项 #

有些网站（比如Google搜索页面）可能设置了X-Frame-Options响应头，禁止被第三方页面嵌入iframe。如果遇到这种情况，你可以尝试使用该网站官方提供的嵌入方案，或者调整目标网址（比如Google的嵌入式搜索页面）。如果是你自己可控的网站，就不会有这个问题。

可选：jQuery版本（如果你习惯用jQuery） #

其实纯JS已经足够简洁，但如果一定要用jQuery，代码可以改成这样：

<!-- 记得先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    const targetUrls = ['https://google.com', 'https://youtube.com'];
    let currentUrlIndex = 0;
    const switchDelay = 30000;

    function switchToNextPage() {
        currentUrlIndex = (currentUrlIndex + 1) % targetUrls.length;
        $('#dashboardFrame').attr('src', targetUrls[currentUrlIndex]);
    }

    setInterval(switchToNextPage, switchDelay);
</script>

内容的提问来源于stack exchange，提问作者Brian Crist