2

首先，即使我的问题是关于如何在<iframe>不闪烁的情况下刷新，任何其他可以解决我的问题的建议都将受到欢迎。

问题：我有一个发布“主”html 页面的服务器。同时，它会拍照（比如每秒一张）并将它们保存在硬盘上。我希望图片在网页上显示并被刷新。

找到的解决方案：我使用了一个<iframe></iframe>范围，在其中放置了另一个仅包含图像的页面。然后定期刷新第二页。所以，整个页面没有刷新，只有图像帧。问题是这个解决方案在每次刷新时都会出现闪烁。

这是主页的代码（有点紧凑）：

<!DOCTYPE html><html><head><title>Blabla</title></head>
<body bgcolor="#404040"><h1>WELCOME!...</h1><hr>
<table border="0"><tr height="480"><td width="640">

<!-- RIGHT HERE! -->
<iframe src="image.html" width="640" height="480" frameborder="0"></iframe>

</td></tr></table>
</body></html>

第二个网页是这样的：

<!DOCTYPE html><html><head>
<script type="text/javascript">
<!--
function f( t )
{
    setTimeout( "location.reload( true );", t );
}
-->
</script>
</head>
<body bgcolor="#000000" onload="JavaScript:f( 1000 );">
<img src="../images/myimage.png" alt="Erreur" height="100%" width="100%"/>
</body>
</html>

我是 JavaScript 的初学者，所以我不假装这段代码很好，甚至可以通过。随时给我一些建议。

现在，是否可以在不闪烁的情况下重新加载？我读到页面未完全加载时会发生闪烁。我还阅读了有关在加载期间打开和关闭隐藏帧等的信息。但我找不到一个好的解决方案。

另外，我知道存在一些像 AJAX 这样的技术，但我对它们知之甚少。如有必要，请随时建议我使用它们，我可以快速学习...

编辑 1：大多数 Android 浏览器不支持我的示例中的相对图像大小。就地使用绝对像素值。

4

1 回答 1

5

重新加载 iframe 总是会闪烁。但是你也不需要 ajax，只需要一个计时器和一个避免缓存的技巧：

<!DOCTYPE html><html><head><title>Blabla</title></head>
<body bgcolor="#404040"><h1>WELCOME!...</h1><hr>
<table border="0"><tr height="480"><td width="640">

<div>
    <img id="theimg" src="../images/myimage.png" alt="Erreur" height="100%" width="100%"/>
</div>

</td></tr></table>

<script type="text/javascript">
var theimg = document.getElementById("theimg");
var theurl = "../images/myimage.png";
setInterval(function() {
    theimg.src = theurl + '?t=' + new Date().getTime();
}, 1000);
</script>
</body></html>
于 2013-11-12T03:02:26.130 回答