如何在 iframe 页面重新加载时修复 chrome 闪烁答案

【问题标题】：how to fix chrome flicker on iframe page reload如何在 iframe 页面重新加载时修复 chrome 闪烁
【发布时间】：2013-10-09 08:30:04
【问题描述】：

在 iframe 中重新加载内容时，Chrome 会闪烁。可以通过任何方式避免这种情况，考虑：

用 js 包装 a-link 会产生一些魔力。
content-html 中的元标记。（我对 iframe 中的 html 进行源代码控制）

请注意，iframe 中的内容类型可能会有所不同（pdf、html、图像），所以如果 ajax 是唯一的出路，它是否反映了 http-content-type iframe？

请访问http://jsfiddle.net/2tEVr/的演示

小提琴节选：

 <iframe name="if" width="800" height="600"></iframe>

更新

最适合我的解决方案是用 ajax-requests 替换常规 href，重新填充 body-area，（下面的解决方案 4）闪烁消失了，但由于内容和“view-源”在 ajax 请求中丢失。

另外，由于我的内容类型可能会发生变化，因此执行 ajax 请求的方法必须有一些头脑，并且可能会退回到常规的位置请求。

问候，

【问题讨论】：

尝试预加载，这样你的闪烁就不会出现
从您的问题来看，您（想要）如何使用 iframe 并不完全清楚。它是定期重新加载，还是在整个网页加载时重新加载一次，或者在用户单击链接时重新加载一次？

标签： html google-chrome web-applications

【解决方案1】：

@user247245：从您的问题来看，您（想要）如何使用 iframe 并不完全清楚。它是定期重新加载，还是在整个网页加载时重新加载一次？

解决方案 1：不同的背景颜色

如果您只想避免丑陋的白色，并避免过于复杂。在 framecontents.html 文件的 HTML 标头中设置不同的背景颜色，如下所示：

<!DOCTYPE html>
<html style="background-color: #F48;">

这样，当CSS 文件加载、解析和应用时，背景不是#fff。

解决方案 2：透明 iframe

虽然没有内容，但 iframe 应该是不可见的。解决方案：

<iframe src="/framecontents.html" allowTransparency="true" background="transparent"></iframe>

当然不要将它与解决方案 1 结合使用，你会在脚上开枪。

解决方案 3：预加载 iframe 页面

如果您稍后加载 iframe（例如用户单击链接），请考虑预加载其内容。将其隐藏在您（父）页面顶部附近：

<iframe src="/framecontents.html" style="position: absolute; width: 0px; height: 0px"></iframe>

但我建议改用解决方案 2。

解决方案 4：如果做移动网页界面：

看看 jQuery Mobile 是如何做到的。我们构建了一个 Web 界面，感觉就像一个原生应用程序，因此无需重新加载闪烁。 jQM 解决了这个问题。基本上执行后台 ajax 调用以检索完整的 HTML 内容，然后提取 body（更准确地说是“页面”div），然后替换内容（如果您愿意，可以使用转换）。一直显示重新加载微调器。

总而言之，这更像是一个移动应用程序：没有重新加载闪烁。其他解决方案是：

方案五：使用JS注入CSS：

见answer by jmva，或http://css-tricks.com/prevent-white-flash-iframe/。

方案6：使用JS注入CSS（简单版）

<script type="text/javascript">
  parent.document.getElementById("theframe").style.visibility = "hidden";
</script>
<iframe id="theframe" src="/framecontents.html"  onload="this.style.visibility='visible';"></iframe>

您当然可以省略<script> 部分并将style="visibility:hidden;" 添加到iframe，但以上将确保该框架对于禁用JS 的访问者可见。实际上，我建议这样做，因为无论如何，99% 的访问者都启用了它，而且它更简单、更有效。

【讨论】：

【解决方案2】：

一个常见的技巧是在 iframe 完全加载时显示它，但最好不要依赖它。

<iframe src="..." style="visibility:hidden;" 
  onload="this.style.visibility='visible';"></iframe>

同样的技巧使用 JS 做了一点优化。

// Prevent variables from being global      
(function () {

/*
      1. Inject CSS which makes iframe invisible
*/
var div = document.createElement('div'),
    ref = document.getElementsByTagName('base')[0] || 
          document.getElementsByTagName('script')[0];

div.innerHTML = '&shy;<style> iframe { visibility: hidden; } </style>';

ref.parentNode.insertBefore(div, ref);


/*
    2. When window loads, remove that CSS, 
       making iframe visible again
*/
window.onload = function() {
    div.parentNode.removeChild(div);
}

})();

摘自css-trick

如果您必须在不同站点之间切换，并且 onload 技巧不起作用，唯一可行的解决方案就是销毁并以编程方式创建 iframe。

【讨论】：

【解决方案3】：

尝试在父元素上添加transform: translate3d(0, 0, 0);。

我遇到了 iframe 比其父级高的问题（父级有 overflow: hidden）。 iframe 的溢出部分在 Chrome（YouTube iframe API）上的每个视频循环上闪烁。

以这种方式强制硬件加速是唯一对我有用的方法。

【讨论】：

谢谢，在 iframe 及其父 div 上都试过了。不走运.. 操作系统：windows
我也为此苦苦挣扎，但没有找到可行的解决方案。我不想仅仅因为 Chrome 而使我的代码过于复杂。它在 FireFox 甚至 Edge 上都能完美运行，所以我想说 Chrome 是问题所在。它有效，但看起来很糟糕。 Chrome 的开发者可以而且应该解决这个问题，FireFox 和 Edge 已经有了。