如何修复iframe页面重新加载时的Chrome Flink

epfja78i 于 2022-12-06 发布在 Go

关注(0)|答案(4)|浏览(160)

在iframe中重新加载内容时，Chrome会 Flink 。可以通过任何方式避免这种情况吗？

用js Package a-links，这确实很神奇。
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-request替换常规href，重新填充主体区域，（下面的解决方案4） Flink 消失了，但代价是Akward调试，因为ajax-request丢失了内容和“视图源”之间的同步。
此外，由于在我的例子中内容类型可能会改变，所以执行ajax-request的方法必须有一些头脑，并且可能会退回到常规的位置请求。
敬祝商祺，

google-chrome

来源：https://stackoverflow.com/questions/19266753/how-to-fix-chrome-flicker-on-iframe-page-reload

4条答案

按热度按时间

igetnqfo1#

@用户247245：从你的问题来看，你并不完全清楚你（想）如何使用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界面，它必须让人感觉像一个原生应用程序，所以没有reload flash。jQM修复了这个问题。基本上是在后台调用ajax来检索完整的HTML内容，然后提取body（更准确地说是"页面" div），然后替换内容（如果你喜欢的话，可以用一个过渡）。同时显示一个reload spinner。
总而言之，这更像是一个移动应用程序：没有重新加载 Flink 。其他解决方案可能是：

解决方案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%的访问者都启用了JS，而且它更简单、更有效。

赞(0）回复(0）举报 2022-12-06

uqxowvwt2#

一个常见的技巧是在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。

赞(0）回复(0）举报 2022-12-06

cnjp1d6j3#

尝试在父元素上添加transform: translate3d(0, 0, 0);。
我遇到了一个问题，iframe比它的父版本高（父版本有overflow: hidden）。iframe的溢出部分在Chrome上的每个视频循环中 Flink （YouTube iframe API）。
以这种方式强制硬件加速是唯一对我有效的方法。

赞(0）回复(0）举报 2022-12-06

rggaifut4#

在我的例子中，一个更简单的解决方案就是将这个CSS添加到iframe中

will-change: height;
min-height: 400px;

赞(0）回复(0）举报 2022-12-06

我来回答

如何修复iframe页面重新加载时的Chrome Flink

4条答案

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

解决方案2：透明iframe

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

解决方案4：如果执行移动Web界面：

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

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

相关问题

热门标签

最新问答