>用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请求的方法必须有一些大脑,并可能回退到常规位置请求.
问候,
解决方法
解决方案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结合使用,你会在脚下拍摄自己.
如果您稍后加载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%的访问者无论如何都启用了它,它更简单,更有效.