html5 – 如何修复iframe页面重新加载时的chrome闪烁

前端之家收集整理的这篇文章主要介绍了html5 – 如何修复iframe页面重新加载时的chrome闪烁前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在iframe中重新加载内容时,Chrome会闪烁.可以以任何方式避免这种情况,想到:

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

请注意,iframe中的内容类型可能会有所不同(pdfs,html,images),所以如果ajax是唯一的出路,它是否会将http-content-type反映回iframe?

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

小提琴的摘录:

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

UPDATE

对我来说效果最好的解决方案是用ajax请求替换常规href,重新填充正文区域(下面的解决方案4)闪烁消失但是由于内容和“view-source”之间的同步是一个调整的代价.失去了ajax请求.

此外,由于我的情况下的内容类型可能会改变,执行ajax请求的方法必须有一些大脑,并可能回退到常规位置请求.

问候,

解决方法

@ 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内容,然后提取正文(“page”div更精确),然后替换内容(如果你愿意,可以转换).一直在显示重装旋转器.

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

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

answer by jmvahttp://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> part并添加style =“visibility:hidden;”到iframe,但上面将确保对于禁用JS的访问者可以看到框架.实际上,我建议这样做,因为99%的访问者无论如何都启用了它,它更简单,更有效.

猜你在找的HTML5相关文章