本文介绍一种基于现代 JavaScript 的轻量级解决方案：通过单页双容器 + fetch() 定期拉取远程 HTML 内容，并结合定时切换显示状态，实现在电视大屏上无缝轮播两个网络监控仪表盘，且内容每 20 秒自动更新、无需整页刷新。
本文介绍一种基于现代 javascript 的轻量级解决方案：通过单页双容器 + `fetch()` 定期拉取远程 html 内容，并结合定时切换显示状态，实现在电视大屏上无缝轮播两个网络监控仪表盘，且内容每 20 秒自动更新、无需整页刷新。
在企业监控场景中，将多个服务器仪表盘（如文件计数、可用性看板）集中展示于电视大屏是常见需求。关键挑战在于：既要避免整页刷新导致的闪烁或中断，又要确保内容实时有效，同时解决多并发请求被本地服务器限制的问题。原方案使用两个独立 XMLHttpRequest 实例分别轮询，易触发浏览器并发连接上限（尤其在老旧内网环境中），造成部分请求挂起或失败。
本方案采用更健壮、更现代的设计思路：
✅ 统一请求调度：仅启用一个 fetch() 调度器，按固定间隔（20 秒）并行拉取两个仪表盘页面的 HTML 内容，写入对应 <div>；<br>
✅ <strong>分离“加载”与“显示”逻辑</strong>：内容刷新与 DOM 可见性切换完全解耦，互不干扰；<br>
✅ <strong>零依赖、纯原生实现</strong>：不依赖 jQuery 或框架，兼容主流现代浏览器（Chrome/Firefox/Edge ≥ v79）；<br>
✅ <strong>强错误防护</strong>：<code>fetch().catch() 显式捕获网络异常，避免静默失败影响轮播节奏。
以下是完整可运行代码（已优化结构与注释）：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>VTS 与 IDS 仪表盘轮播</title><style>
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
#div1, #div2 {
width: 100vw;
height: 100vh;
overflow: hidden;
}
#div2 {
display: none; /* 初始隐藏第二面板 */
}
/* 可选：添加淡入淡出过渡效果 */
#div1, #div2 {
transition: opacity 0.4s ease;
}
#div1.hidden, #div2.hidden {
opacity: 0;
}
</style><div id="div1"></div>
<div id="div2"></div>
<script>
// 配置项：便于后续维护
const CONFIG = {
urls: {
div1: 'http://vtc130/hm01/dashboard.htm',
div2: 'http://vtc130/hm01/dashboardIDS.htm'
},
refreshInterval: 20000, // 内容刷新周期（毫秒）
switchInterval: 120000 // 面板切换周期（毫秒）
};
let currentVisible = 1; // 当前显示的 div 编号（1 或 2）
/**
* 从指定 URL 加载 HTML 内容并注入到目标 div
* @param {string} divId - 目标容器 ID（'div1' 或 'div2'）
*/
function fetchContent(divId) {
const url = CONFIG.urls[divId];
if (!url) return;
fetch(url + '?t=' + Date.now()) // 添加时间戳防止缓存
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.text();
})
.then(html => {
const div = document.getElementById(divId);
if (div) div.innerHTML = html;
})
.catch(err => {
console.warn(`⚠️ 无法加载 ${divId} 内容：`, err.message);
// 可选：显示降级提示（如“数据暂不可用”）
const div = document.getElementById(divId);
if (div) div.innerHTML = `<div style="color:#e74c3c;font-size:1.2em;text-align:center;padding:20px;">⚠️ 数据加载失败，请检查服务状态</script>
