Tes*_*son 7 html5 google-chrome web-applications
在iframe中重新加载内容时,Chrome会闪烁.可以以任何方式避免这种情况,想到:
请注意,iframe中的内容类型可能会有所不同(pdf,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.它会定期重新加载,还是整个网页加载一次？
如果你只是想避免丑陋的白色,并避免过度复杂.在framecontents.html文件的HTML标头中设置不同的背景颜色,如下所示:
<!DOCTYPE html>
<html style="background-color: #F48;">
这样,当CSS文件加载,解析和应用时,背景不是#fff.
虽然没有内容,但iframe应该不可见.解:
<iframe src="/framecontents.html" allowTransparency="true" background="transparent"></iframe>
当然,不要将它与解决方案1结合使用,你会在脚下拍摄自己.
如果您稍后加载iframe(例如用户单击链接),请考虑预加载其内容.将其隐藏在(父)页面顶部附近:
<iframe src="/framecontents.html" style="position: absolute; width: 0px; height: 0px"></iframe>
但我建议使用解决方案2.
了解jQuery Mobile是如何做到的.我们构建了一个必须感觉像本机应用程序的Web界面,因此无需重新加载闪存.jQM解决了这个问题.基本上是后台ajax调用来检索完整的HTML内容,然后提取body("页面" div更精确)然后替换内容(如果你愿意,可以转换).一直显示重装旋转器.
总而言之,这更像是一个移动应用程序:没有重新加载闪存.其他解决方案是:
请参阅jmva的回答,或http://css-tricks.com/prevent-white-flash-iframe/.
<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%的访问者无论如何都启用了它,它更简单,更有效.
| 归档时间： |
|
| 查看次数： |
10423 次 |
| 最近记录： |