我可以在内容加载之前更改或控制 IFRAME 区域的颜色吗？ [复制]答案

【问题标题】：Can I change or control the color of the IFRAME area before the content loads? [duplicate]我可以在内容加载之前更改或控制 IFRAME 区域的颜色吗？ [复制]
【发布时间】：2010-10-06 13:36:57
【问题描述】：

可能重复：
fb like button creates a white background on page onload in all ie versions

我有一个网站，其中部分内容被加载到 IFrame 中。

我遇到的问题是 iFrame 的内部内容在页面本身加载之前是白色的，并且内容具有不同的背景颜色（在本例中为蓝色）。因此，在内容加载之前，我会在屏幕上显示这些白色方块。

有没有办法指定空 IFrame 应该呈现什么颜色，直到它有内容？

或者我在这里采取了错误的策略 - 有没有一种好方法可以在内容准备好显示之前阻止页面呈现？

更新：看起来我描述的“白色区域”位是特定于 IE 的。

【问题讨论】：

标签： html css internet-explorer iframe

【解决方案1】：

您或许可以在加载内容之前设置iframe 的文档并设置其样式。

或者您可以使用 Ajax 而不会遇到这些问题。 =]（当然，假设它是否适合该任务。）

【讨论】：

好吧，我想做的是从 WordPress 加载内容，然后让客户端在 WordPress 中编辑“页面”，而不会破坏主布局。

【解决方案2】：

这并不难：

<iframe id="IFR" src="time.php" style="background-color: #f00;" />

编辑：我忽略了在 IE 中进行测试——它在 FireFox 中确实有效。例如：http://beta.tagcloud.com/contain.html

该示例演示了页面快速切换为全红色，然后当 iframe 加载时（在 5 秒内），它切换为黑色。

【讨论】：

不起作用。仍然闪烁白色。

【解决方案3】：

这让我发疯了，但我实际上找到了一个似乎在 IE6 和 7 中工作的解决方案。尚未在其他浏览器中测试过，但无论如何 Firefox 似乎都能正常运行。

如果 iframe 在加载时未显示，问题就解决了，但 iframe 似乎立即触发“onload”，所以在发出警报后，我注意到它触发了两次 onload，一次在页面加载时，然后再次一旦 iframe 页面加载...

//这里是相关的javascript 负载计数 = 1; 函数加载帧（）{ if(loadCount > 1) { //这可以防止脚本在第一次触发时显示帧 document.getElementById('theFrame').style.display=''; 返回; } 负载计数++； }

【讨论】：

【解决方案4】：

解决此问题的最简单方法是在 iframe 准备好之前不显示它。这样你就可以在 iframe 下设置你想要的任何背景。您设置背景并防止显示 iframe，直到像这样加载：

<div style="background-color:#XXXXX">
  <iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>
</div>

唯一的缺点是如果您的访问者关闭了 js，他们将不会看到 iframe。如果您对此感到担忧，请查看http://css-tricks.com/prevent-white-flash-iframe/

【讨论】：