0

我在页面中有一个 iFrame。当页面加载时，iFrame 显示为黑框，直到它也被加载。这在视觉上会分散注意力。如何防止页面加载时出现黑框？

iFrame 代码 + 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/

它是您在打开网站上看到的正文下方的电子邮件注册框。

4

1 回答 1

0

这是我解决黑匣子问题的方法。我找不到唯一的 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。您还可以将重复的 iFrame 包装在<noscript>标签中。我选择了最适合我情况的方法。

于 2013-07-06T02:22:18.933 回答