gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 14:05:11 26 4
gpt4 key购买 nike

在 iframe 中重新加载内容时,Chrome 会闪烁。可以通过任何方式避免这种情况,考虑到:

  • 用 js 包装 a-links,这会产生一些魔力。
  • content-html 中的元标记。 (我对 iframe 中的 html 有源代码控制)

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

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

fiddle 摘录:

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

更新

对我来说最有效的解决方案是用 ajax 请求替换常规 href,重新填充正文区域,(下面的解决方案 4)闪烁消失了,但由于内容和“ View ”之间的同步,所以代价是调试不当源”在 ajax 请求中丢失。

此外,由于我的情况中的内容类型可能会发生变化,因此执行 ajax 请求的方法必须有一些头脑,并且可能会退回到常规位置请求。

问候,

最佳答案

@user247245:从你的问题来看,你(想要)如何使用 iframe 并不完全清楚。它是定期重新加载,还是在整个网页加载时重新加载一次?

方案一:不同的背景色

如果您只想避免丑陋的白色,并避免过度复杂化。在 framecontents.html 文件的 HTML header 中设置不同的背景颜色,如下所示:

<!DOCTYPE html>
<html style="background-color: #F48;">

这样,同时 CSS文件加载、解析和应用,背景不是 #fff .

方案二:透明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:如果做移动网络界面:

看看 jQuery Mobile 是如何做到的。我们构建了一个 Web 界面,它必须感觉像 native 应用程序,因此无需重新加载闪存。 jQM 解决了这个问题。基本上执行后台 ajax 调用以检索完整的 HTML 内容,然后提取 body (“页面”div 更准确)然后替换内容(如果您愿意,可以使用过渡)。一直显示重新加载微调器。

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

方案五:使用JS注入(inject)CSS:

参见 answer by jmva , 或 http://css-tricks.com/prevent-white-flash-iframe/ .

方案六:使用JS注入(inject)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% 的访问者无论如何都启用了它,而且它更简单、更有效。

关于html - 如何修复 iframe 页面重新加载时的 chrome 闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19266753/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com