9

在 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 请求替换常规 href，重新填充正文区域，（下面的解决方案 4）闪烁消失了，但由于内容和“视图源”之间的同步是在 ajax 请求中丢失。

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

问候，

4

3 回答 3

12

@ 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：如果做一个移动 Web 界面：

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

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

解决方案5：使用JS注入CSS：

请参阅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% 的访问者都启用了它，而且它更简单、更有效。

于 2014-02-25T08:23:12.007 回答
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。

于 2014-02-24T12:52:04.010 回答
2

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

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

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

于 2018-04-12T14:16:08.653 回答