gpt4 book ai didi

javascript - 刷新iframe时如何避免闪烁?

转载 作者:行者123 更新时间:2023-11-30 08:48:19 24 4
gpt4 key购买 nike

首先,即使我的问题是关于如何刷新 <iframe>没有闪烁,欢迎任何其他可以解决我的问题的建议。

问题: 我有一个发布“主”html 页面的服务器。同时,它会拍照(比如每秒一张)并将它们保存在 HDD 上。我想让图片在网页上显示并刷新。

找到的解决方案:我使用 <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 浏览器不支持像我的示例中那样的相对图像大小。就地使用绝对像素值。

最佳答案

重新加载 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>

关于javascript - 刷新iframe时如何避免闪烁?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19919945/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com