javascript - 重新加载 iframe 而不会闪烁/闪烁（在 Javascript 中）

Question

我想问是否有人有一个简单的解决方案，可以让我重新加载/刷新 iframe，但在页面重新加载时没有闪烁/闪烁，这可能吗？也许动画模糊然后模糊而不是闪烁/闪光？我不知道任何输入会有所帮助，

谢谢。

这是我现在重新加载 iframe 的方法

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

谢谢您的帮助。

Answer 1

最简单的方法：

1. 在 DOM 之外或隐藏元素中创建一个新的 iframe。
2. 在隐藏框架内加载页面
3. 一旦负载甚至在隐藏框架内触发，只需交换它们！

交换

要实际交换它们，只需将它们彼此相邻并切换display: none / block每个的 css。

Answer 2

您可以尝试将iframe内部放置在容器中div：

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

然后在您的 JavaScript 中创建第二个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。

Answer 3

确实没有办法避免闪烁，因为那是页面刷新并呈现新内容。

您可以在刷新时隐藏 iframe。在 iframe 中，当 DOM 准备好时，通过 parent.functionName() 调用一些父函数，这将使 iframe 可见。