Question

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

用js包装一个带有魔力的链接。
content-html中的元标记。（我对iframe中的html有源代码控制权）

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

上的演示版

小提琴的摘录：

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

更新

对我来说最有效的解决方案是用ajax请求替换常规href，重新填充正文区域，（下面的解决方案4）闪烁消失但是由于内容和“视图”之间的同步而导致调试失败的代价来源“在ajax请求中丢失了。

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

的问候，

Answer 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更精确）然后替换内容（如果你愿意，可以转换）。显示重装旋转器。

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

解决方案5：使用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％的访问者无论如何都启用了它，它更简单，更有效。

Answer 2

一个常见的技巧是在iframe完全加载时显示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。

Answer 3

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

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

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

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

3 个答案: