iFrames是否被认为是“不良实践”？

Question

iFrames是否被认为是“不良实践”？

htmliframestandards

314

在某个时候，我曾听说使用iframe是“不良惯例”。

这是真的吗？使用它们的利弊如何？

- htxt

1

还可以参考Mozilla关于嵌入技术的文档。 - djvg

11个回答

82

它们并不是不好的实践，它们只是另一种工具，并且增加了灵活性。

作为标准页面元素使用时，它们很好，因为它们是将内容分隔到多个页面上的简单可靠的方式。特别是对于用户生成的内容，将内部页面 "沙盒化 "到 iframe 中可能会很有用，这样糟糕的标记就不会影响主页面。缺点是如果引入多层滚动（浏览器和 iframe 的滚动），你的用户会感到沮丧。像 adzm 说的那样，你不想将 iframe 用于主导航，但要将它们视为文本/标记等效于视频或其他媒体文件的嵌入方式。

对于脚本后台事件，选择通常在隐藏的 iframe 和 XmlHttpRequest 之间进行，以加载当前页面的内容。区别在于，iframe 生成一个页面加载，因此你可以在大多数浏览器中通过浏览器缓存回退和前进。请注意，Google 在许多地方使用 XmlHttpRequest，但在某些情况下也使用 iframe 允许用户在浏览器历史记录中后退和前进。

- Tom

11

重要提醒：iframes可以用于将一个域中的页面嵌入到另一个域的页面中。如果被嵌入的页面希望使用cookie跟踪用户并保留来自主机域的信息，那么您唯一的选择是使用iframe，因为JS处于主机域的控制下。 - Nicholas Leonard

@NicholasLeonard 一个不错的例子是你可以使用它们来强制本地存储缓存页面，通过将主页设置成一个脚本，检测子页面是否在本地存储中。然后，如果有，从本地存储中直接将其 document.write 出来，否则在 iframe 中添加该子页面。在该子页面中，有一个脚本可以将子页面 HTML 元素的 outerhtml 存储到本地存储中。使用这种方法的一个非常好的理由是它允许你添加一个加载屏幕。 - user7892745

我不同意，但是我不能给它点踩，因为这是一个重要的观点。 - victorf

33

如果不了解它们的缺点，使用它们是“不良实践”。Adzm的帖子很好地总结了它们。

另一方面，Gmail在后台为其某些更酷的功能（如自动文件上传）大量使用iFrame。如果您了解iFrame的限制，我认为您不应该有任何犹豫使用它们。

- Chris Pebble

20

在许多情况下与它们一起工作后，我真的认为 iframe是Web编程中的goto语句等价物。也就是说，应该尽量避免使用。在一个网站内部，它们可能有些用处。但是，在跨站点时，除了最简单的内容之外，它们几乎总是一个坏主意。

考虑以下可能性...如果用于参数化内容，则它们创建了一个接口。在专业站点中，该接口需要服务级别协议和版本管理-通常会忽略这些问题而匆忙上线。

如果用于托管脚本的框架，那么就有不同的跨域脚本限制。有些可以被黑客攻击，但很少能保持一致性。如果您的框架内容需要交互，则它将难以超越框架进行交互。

如果与许可内容一起使用，那么参与的站点将负担从主机之间移动授权信息的需求。

因此，尽管它们偶尔在网站内部有用，但它们相当不适合混搭。你最好看看真正的门户和端口，更糟糕的是，他们是每个网络新手都喜欢的东西 - 许多技术经理已经将它们视为解决许多问题的方法。实际上，它们会制造更多问题。

- user261975

10

根据我的经验，使用iframe的一个优点是在调用第三方代码时，可能涉及到调用一个调用Document.write();命令的javascript，正如您所知，由于它是解析的方式（DOM解析器等），这些命令无法异步调用。其中一个示例是http://sourceforge.net/projects/phpadsnew/ 我使用iframe来加速我们的网站，因为有多个对phpadsnews的调用，该网站正在等待响应，然后才能呈现页面的其他部分。使用iframe，我能够让网站呈现页面的其他部分，并仍可以异步调用phpads的Document.write()命令，从而防止js锁定。

- mel3kings

8

iframes确实有用途。否则，您怎么能将天气预报网络小部件放在您的页面上呢？唯一的其他方法是获取他们的XML并解析它，但是当然您需要条件来展示相关的天气图形... 如果您有时间，这不值得，但是更加清晰。

- djbryson

6

原始的框架集模型（Frameset和Frame元素）从可用性的角度来看非常糟糕。IFrame是后来的发明，它没有像原始的框架集模型那样有很多问题，但它确实有它的缺点。

如果允许用户在IFrame内部导航，则链接和书签将无法按预期工作（因为您会将外部页面的URL添加到书签中，而不是iframe的URL）。

- olavk

1

我不得不反对...这样的广泛评论根本没有资格。 - Dawesi

5

值得注意的是，无论用户的互联网连接速度或iframe的内容如何，iframe都会导致页面下载速度略微减慢（约0.3秒），这是您在本地测试时看不到的。实际上，这对于任何添加到页面的元素都是正确的，但iframes似乎更糟糕。

- Brian

1

为什么？有没有办法让iframe在主页面加载完成后再加载？ - Nicholas Leonard

3

我不记得它们为什么这么慢；我是在一年前研究的。可能是因为浏览器基本上为每个iframe创建了一个全新的渲染上下文。至于如何使它们在页面加载完成前不加载，您可以使用一个空的iframe，然后在页面加载完成后设置iframe的src标签。但请注意，即使是空的iframe也会减缓您的页面渲染速度，尽管不会影响下载速度，所以对于用户来说，页面仍然会出现一些延迟。 - Brian

3

相反，当提到速度和iFrames时，人们可能会考虑讨论CDN（内容分发网络）。请考虑iFrame能够并行下载资源，因此能够提供速度的提升（取决于浏览器）。这里至少还有一个参考链接支持我的观点。http://developer.yahoo.com/performance/rules.html - Strixy

2

@Strixy：您指定的URL指出IFrame即使为空也很昂贵，建议最小化使用IFrame。使用CDN加速您的网站与使用IFrame是正交的。CDN可以帮助减轻使用IFrame的成本。但是，没有IFrame的CDN比CDN和IFrame更好。 - Brian

1

@Strixy: 如果你想要并行下载资源，有更好的方法可以做到。旧方法是通过JavaScript加载所有这些内容。新方法是使用Service worker，它实际上允许你直接管理用户代理如何使用客户端逻辑加载、预加载和缓存站点资源。另一种新方法是http/2推送，它允许你发送资源到浏览器，而无需等待浏览器请求它们。然而，由于http/2缓存是在其他浏览器缓存之后检查的，因此通常不适合此目的。 - Brian

显示剩余2条评论

5

当您的主页面以HTTP协议加载，而页面的某些部分需要在HTTPS协议下工作时，iFrame可以轻松胜过jsonp。

特别是，如果您的dataType不是本地的json格式，并且需要在服务器上将其翻译成json格式，然后在客户端再将其翻译回例如复杂的html格式。

所以不，iFrame并不是邪恶的。

- Jeffz

5

它们并不糟糕，实际上很有帮助。有一段时间我遇到了一个巨大的问题，需要嵌入我的Twitter动态，但是它就是不能与同一页md格式兼容，所以我将它放在了另外一个页面，并以iframe形式插入。

此外，它们非常好，因为所有浏览器（包括手机浏览器）都支持它们。只要使用得当，它们就不会被视为一种不良做法。

- Vlad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adzm · Accepted Answer

就像所有技术一样，iframe也有它的优点和缺点。如果你使用iframe来规避一个已经完全开发好的网站，那当然是不好的做法。但有时候使用iframe是可以接受的。

使用iframe的主要问题之一与书签和导航有关。如果你仅仅是使用它将页面嵌入你的内容中，那我认为这是可以的。那就是iframe的用途。

然而，我也看过滥用iframe的情况。它永远不应该被用作站点的一个组成部分，而应该作为站点内的一个内容片段。

通常，如果你可以不使用iframe完成这个功能，那会是更好的选择。我相信其他人在这里可能会有更多信息或更具体的例子，但这归结于你所要解决的问题。

话虽如此，如果你只能使用HTML并且没有访问像PHP或ASP.NET等后端，则有时候iframe是你唯一的选择。