将 iFrame CSS 设置为显示：加载期间无

Posted 2023-03-06

【中文标题】将 iFrame CSS 设置为显示：加载期间无

【英文标题】：Setting iFrame CSS to display:none during load

【发布时间】：2012-09-21 14:43:59

【问题描述】：

我有这个：

<div class="upload_slide">
    <iframe class="upload_iframe" style="visibility:hidden;"></iframe>
</div>

如果我随后将一些文件发布到 iFrame 并将 .upload_slide 设置为 display:none;，而它正在加载，这会影响 iFrame 的加载或检测它何时完成加载吗？

【参考方案1】：

不，iFrame 的加载和加载检测不应因将显示设置为无而受到影响。

CSS 只是为了样式，它没有影响 DOM 的能力。

【讨论】：

在<img>（或其任何父级）上设置display:none 将阻止它加载。 CSS 可以 影响 DOM，但很可惜，不适用于 <iframe>s。

这不是真的。无论可见性如何，图像都会加载，除非您使用的是loading="lazy"。然而，CSS 背景图像确实对可见性做出反应，尽管这种行为在浏览器中并不是完全标准的。

我实际上来到这里是因为我发现在 chrome 中的 iframe 上设置 'display: none' 会重新加载其 url。

【参考方案2】：

应该没有问题，但如果有的话，一个好的技巧是将元素移出屏幕而不是隐藏它。您可以创建一个类，如

.offscreen
    position: absolute;
    left: -5000px;

您可以根据需要添加和删除。

【讨论】：

display:none 使 Firefox 不再从 iframe 触发打印对话框。很好的答案。

【参考方案3】：

Firefox 目前确实存在显示问题：无：

一些浏览器假定当“display:none”应用于被替换的元素（如 Flash 或 iframe）时，不再需要该元素的视觉信息。因此，如果元素稍后由 CSS 显示，浏览器实际上将重新创建可视数据表单。

我想 iframe 默认设置为“display:none;”使浏览器跳过 html 的呈现，因此标签没有任何尺寸。我会将可见性设置为“隐藏”或将其置于页面之外，而不是使用“display:none;”。

史蒂文·帕利戈

Link

【讨论】：

我猜这发生在带有 chrome 59 的 iframe 中。某些表格边框虚线样式未加载，如果 iframe 设置为 display:none，并且您打印 iframe。

【参考方案4】：

不..一点也不..

CSS - display:none 或 visibility:hidden 仅表示浏览器不向用户显示 iframe 内容。

但该功能可以正常工作，没有任何问题。

【参考方案5】：

据我所知，它应该可以正常工作。我一直在使用隐藏的 iframe 加载内容，但没有遇到任何问题。

也就是说，我知道有些浏览器试图通过不加载隐藏的图像来提高效率，所以有些浏览器（尤其是移动浏览器）可能会对 iframe 做同样的事情。