加载时iFrame黑匣子？

Question

我在页面中有一个iFrame。当页面加载时，iFrame显示为黑盒子，直到它也被加载。这在视觉上分散了注意力。如何在页面加载时阻止显示黑匣子？

iFrame Code + CSS：

<iframe class="iframe-email-signup" frameborder="0" src="/src.html"></iframe>

/* CSS for above Class */

.iframe-email-signup{
   max-height:7em;
   background: none !important;
}

遇到问题的网站是：http://www.checkplusbalance.com/

电子邮件注册框位于您在开放网站上看到的正文下方。

Answer 1

以下是我能够解决黑匣子问题的方法。我找不到一个只有CSS的解决方案，所以我只在iFrame加载后才使用JS来显示iFrame。

iFrame代码

<iframe id="iFrameID" frameborder="0" src="src.html"></iframe>

的 CSS 的

#iFrameID{
   display:none;
}

的 JS 的

$(function() {
   $("#iFrameID").on('load', function () {
       $("#iFrameID").fadeIn("fast");
   });
}); 

注意：

如果用户禁用了JS，则iFrame将不会显示。在我的情况下，如果没有启用JS，iFrame的内容将无法工作，所以我对此感到满意。

使用JS隐藏iFrame还有其他解决方法，因此如果用户没有JS，他们仍会看到iFrame。您还可以在<noscript>标记中包含重复的iFrame。我选择了最符合我情况的方法。