我对 JavaScript 不熟悉，所以我还在学习中。 在我们的办公室，我们有两台不同的服务器监控我们的网络（文件计数、文件可用性等）。两台服务器每分钟都会生成一个仪表板页面。 我想以 2 分钟的间隔依次查看两个仪表板，并刷新仪表板的内容，而无需刷新整个网页，因为这是在电视上显示的。 我已经将其工作到了两个仪表板以所需的间隔显示的程度，但只有两个仪表板的内容没有被更新/刷新，我不明白为什么。
我使用以下 HTML 创建了一个网页：
<!DOCTYPE html>
<html>
<head>
<title>Live Update</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="autoUpdateVTS.js"></script>
<script type="text/javascript" src="autoUpdateIDS.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="VTS">
</div>
<div id="IDS" class="hide">
</div>
</body>
</html>
CSS 仅包含我的 DIV 可见性的数据：
html,
body {
}
#VTS {
}
#IDS {
}
.hide { display: none !important; }
第一个脚本获取第一个仪表板的内容并每 20 秒刷新一次数据：
document.addEventListener("DOMContentLoaded", function()
{
var xhr = null;
getXmlHttpRequestObject = function()
{
if(!xhr)
{
xhr = new XMLHttpRequest();
}
return xhr;
};
updateVTS = function()
{
var now = new Date();
var url = 'http://vtc130/hm01/dashboard.htm'; + now.getTime();
xhr = getXmlHttpRequestObject();
xhr.onreadystatechange = evenHandlervts;
// asynchronous requests
xhr.open("GET", url, true);
xhr.send(null);
};
updateVTS();
function evenHandlervts()
{
// Check response is ready or not
if(xhr.readyState == 4 && xhr.status == 200)
{
dataDiv = document.getElementById('VTS');
// Set current data text
dataDiv.innerHTML = xhr.responseText;
// Update the live data every 20 sec
setTimeout(updateVTS, 20000);
}
}
});
第二个脚本与上面的相同，但从第二个仪表板获取数据并将其放入另一个 DIV 中。
script.js用于切换两个DIV的可见性，间隔2分钟：
window.addEventListener('load', function()
{
switchVTSIDS = function()
{
setInterval(function() {
VTS.classList.toggle("hide");
IDS.classList.toggle("hide");
}, 120000);
};
switchVTSIDS();
});
通过上述设置，两个 DIV 可以根据需要进行切换，但是这两个 DIV 的数据不会自动刷新/更新。 当我打开网页时，会加载 DIV 中的数据，但它们不会自动更新。
希望有人可以帮助我并指出正确的方向。
对于可能遇到同样问题的人，我可以使用不同的解决方案来解决此问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VTS en IDS Dashboard</title>
<style>
#div1, #div2 {
div2.display: none; /* Initially hide the second div */
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<script>
let currentDiv = 1;
function fetchContent(divId) {
const fileName = divId === 'div1' ? 'http://vtc130/hm01/dashboard.htm' : 'http://vtc130/hm01/dashboardIDS.htm';
fetch(fileName)
.then(response => response.text())
.then(data => {
const div = document.getElementById(divId);
div.innerHTML = data;
})
.catch(error => {
console.error("Error loading content:", error);
});
}
function switchDivs() {
document.getElementById('div' + currentDiv).style.display = 'none';
currentDiv = (currentDiv === 1) ? 2 : 1;
document.getElementById('div' + currentDiv).style.display = 'block';
}
// Initially load content for both divs
fetchContent('div1');
fetchContent('div2');
// Periodically refresh content for both divs every 20 seconds
setInterval(function() {
fetchContent('div1');
fetchContent('div2');
}, 20000);
// Switch visibility every 2 minutes
setInterval(function() {
switchDivs();
}, 120000);
</script>
</body>
</html>