在Javascript中重新加载iframe而不闪烁/闪光。

Question

我想询问是否有简单的解决方案，可以重新加载/刷新 iframe，但不会在页面重新加载时出现闪烁/闪光，这可能吗？ 也许可以通过模糊化和取消模糊化来实现动画效果，而不是闪烁/闪光？我不知道，任何意见都将有所帮助， 谢谢。 以下是我现在重新加载 iframe 的方法。

document.getElementById("FrameID").contentDocument.location.reload(true);

感谢您的帮助。

- compcobalt

---

不，我认为这是不可能的。它需要重新加载页面，因此总会有一点闪烁。 - putvande

它被称为FOUC，而且不容易修复。在通常情况下，它与CSS有关，但在这种情况下，它与iFrame源相关。 - Iron3eagle

Answer 1

最简单的方法:

1. 在DOM之外或隐藏元素中创建一个新的iframe。
2. 在隐藏的frame中加载页面。
3. 一旦隐藏的frame内部的加载事件触发，就可以互换它们的位置了！

交换

要实际进行交换，只需将它们放在一起并切换每个元素的 display: none / block css 属性即可。

- ZorleQ

---

酷啊！！ :) 但是你怎么交换它们的位置？（我从未见过那样的，听起来超酷） - compcobalt

我已经添加了一个例子。 - ZorleQ

@compcobalt 我想有很多种方法，但最简单的可能就是将新的立即放置在你在DOM中显示的那个后面，然后隐藏旧的并显示新的。我不确定这会有多快。 - Vala

就像@Thor84no所说的那样，将它们放在一起并简单地显示/隐藏将是最容易和最快的方法。 - ZorleQ

谢谢。在我的情况下救命稻草。http://codecorner.galanter.net/2016/05/05/flicker-free-iframe-refresh/ - Yuriy Galanter

Answer 2

您可以尝试将 iframe 放到一个容器的 div 中：

<div id="iframe-container">
    <iframe src="..."></iframe>
</div>

然后在您的JavaScript中创建第二个iframe，将其放置在第一个iframe之后，然后隐藏第一个iframe：

var container = document.getElementById('iframe-container');

var iframe2 = document.createElement('iframe');
iframe2.src = 'http://new.url.com';
iframe2.style.visibility = 'hidden';
container.appendChild(iframe2);

container.removeChild(container.getElementsByTagName('iframe')[0]);
iframe2.style.visibility = 'visible';

希望这个能够正常运行，我还没有测试过。你还需要调整你的CSS样式。

- Samer

Answer 3

实际上，无法避免页面刷新和渲染新内容时的闪烁。

您可以在刷新时隐藏iframe。并且在iframe中，当DOM准备就绪时，通过parent.functionName()调用一些父级函数，然后使iframe可见。

- crowebird