如何避免闪烁 iframe？答案

【问题标题】：How to avoid blinking iframe?如何避免闪烁 iframe？
【发布时间】：2023-04-02 22:25:01
【问题描述】：

<a href="#" id="toggle01">CONTACT</a>

<script>
$('#toggle01').click(function() {
    $('#contact').slideToggle("slow");
    return false;
});
</script>


<div id="contact">
123-456<br />
</div>
<iframe id="player" src="http://www.youtube.com/embed/..."></iframe>

这里一切正常，但是当我点击链接 CONTACT 并且 div#contact 变得可见/不可见时，iframe 会闪烁。
我怎样才能避免这种闪烁？

【问题讨论】：

你能告诉我们slideToggle插件，它有什么作用？
这可能是一个可能的答案。 stackoverflow.com/questions/7200425/… 你想用 iframe 做什么？您还可以使用带有overflow:auto; 的DIV @Bergi slideToggle 是一个JQuery 本机函数。
@IgnacioBelhotColistro，同意你的回答。
好的，谢谢你的提示——我不认为这是简单的高度动画切换。 @Alegro：我认为唯一的可能性是使用更强大的机器/更好的浏览器或不改变视频播放器位置的动画。
@IgnacioBelhotColistro，你说我可以使用 div 代替 iframe 吗？我在框架中有一个 youtube 视频。

标签： javascript html iframe

【解决方案1】：

问题似乎是滑动动画。当您的 div 动画时，iframe 会向下移动并导致重新渲染。

您可以将您的 div 放在 iframe 之后或将其封装在另一个具有固定高度的 div 中。

例如：

<div style="height:50px;">
    <div id="contact">
        123-456<br />
    </div>
</div>

但这会在您的 iframe 上方留下一个空白区域。

【讨论】：

我尝试了你所说的一切，但没有结果。这是地址：http://www.mementocosmicum.site90.net/
您的网站适合我。仅在 IE 中它会闪烁一点，但这是特定于浏览器的，无法通过脚本修复，除非重新排列您的项目。

【解决方案2】：

您的脚本看起来正确，我看不出它应该闪烁的任何原因。但是你能试试下面的脚本吗？添加 e.preventDefault();

<script>
   $('#toggle01').click(function(e) {
     e.preventDefault();
     $('#contact').slideToggle("slow");
     return false;
   });
</script>

【讨论】：

对不起，我忘了放括号。已更正。
阿布舍克，iframe又闪了
我对此进行了测试，它对我来说没有闪烁。正确检查您的 css 和 html 标签。