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

html5 – 如何修复iframe页面重新加载时的chrome闪烁的更多相关文章

  1. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  4. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

  5. HTML5实现直播间评论滚动效果的代码

    这篇文章主要介绍了HTML5实现直播间评论滚动效果的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 使用Html5多媒体实现微信语音功能

    这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下

  7. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  8. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. HTML5自定义视频播放器源码

    这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  10. HTML5新增form控件和表单属性实例代码详解

    这篇文章主要介绍了HTML5新增form控件和表单属性实例代码详解,需要的朋友可以参考下

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部