强制定时更新 CSS 文件

Force timed update of CSS file

本文关键字：CSS 文件 更新 定时      更新时间：2023-09-26

编辑：

感谢Akshat和Jeffrey的帮助和建议。 我将用非常简单的术语重新提出我的问题：

如何使我的网页在坐标更改时平滑地重新定位图像。应用程序每隔一分钟左右将 cordinate 写入服务器上的文件。 我说顺利是因为我不希望用户干预或强制页面刷新（META HTTP-EQUIV=REFRESH CONTENT=300），这很容易，但不是一个很好的用户体验。

我希望这是有道理的。 再次感谢。

我有一个简单的网页，上面有一张图片 - 一张地图 - 每分钟左右就会发生变化。地图每 30 秒动态更新一次，如下所示：

<script language="JavaScript">
<!--
function refreshMap1() {
   if (!document.images) return;
   document.images['map1'].src = 'map1.jpg?' + Math.random();
   setTimeout('refreshMap1()',30000);
}
//--></script>

然后：

<body onload=" setTimeout('refreshMap1()',30000)">
<img src="map1.jpg" name="map1">

这工作正常。

我通过加载包含绝对定位的样式表在地图上叠加动画 gif，如下所示：

<link rel="stylesheet" type="text/css" href="position.css" />

然后：

<img src="animation.gif" class="pos1" id="a1">

css 文件（position.css）只包含：

.pos1 { position: absolute; left: 300px; top: 400px; }

这也很好用，但是.... css 文件将每分钟左右与地图相同地更改一次，以反映 gif 的新位置。 我想通过以与地图类似的方式每 30 秒强制更新一次 css 来动态更改动画 gif 的位置。 我无法找到强制动态定时更新 css 文件的方法。

有什么想法吗？

蒂亚。

您不需要更改 css 文件。只需将其放入刷新功能中：

document.getElementById("a1").style.top = XXX+"px";
document.getElementById("a1").style.left = XXX+"px";

我希望这有所帮助。

如果id或class在每个 CSS 文件中都是唯一的，您可以预先加载所有 CSS，并每 30 秒更改一次标识符。CSS 文件很少太大。

动态加载CSS是可能的，但我真的不建议这样做;它违背了Web标准，并且欢迎潜在的安全问题。一种方法是将内容注入style标签中，如以下答案所述：

动态加载页面内容及其 CSS - 如何防止跳转，因为 CSS 尚未加载？

最后一点，您可能应该练习将字符串用于setTimeout函数。使用匿名函数，或者如果函数是全局的（在您的情况下是全局的），则使用对该函数的引用。 例如，setTimeout(refreshMap1, 30000);可以取代setTimeout('refreshMap1()',30000);。

相关文章：