为什么人们仍然使用 iframe？ [关闭]答案

【问题标题】：Why do people still use iframes? [closed]为什么人们仍然使用 iframe？ [关闭]
【发布时间】：2010-09-26 09:17:08
【问题描述】：

对我来说，iframe 是纯粹的邪恶（好吧，也许不是那么纯粹）。他们似乎制造了很多麻烦。是的，您的整个网站将加载一次，然后您可以只加载单个页面。但人们为此发明了 AJAX。

我发现iframe 的最大问题之一是我无法粘贴指向其中一个子页面的链接，因为 URL 从未更改（是的，我知道有一个解决方法）。其次，网络搜索引擎在索引此类页面时可能会遇到问题。

有时该网站的可访问性更差，某些浏览器甚至可能无法正常显示。

有更好的方法来设计没有 iframe 的布局。每天我都可以看到有人问一些 SO 问题，比如“如何使用 jQuery 访问 iframe？”。

那么 iframe 有什么好处呢？仍然使用它们的原因是什么？我只是想知道为什么。

【问题讨论】：

我同意上面的 Moshe。 Iframe 的唯一其他用途是：不支持现代 CSS 或在某些专有环境中的古老 Web 客户端。
这些天来，不幸的是，每个浏览器都有兼容性问题！他们不标准！ div 标签有问题，table 标签有问题等等……他们会浪费我们的时间来设计一个 100% 兼容的网站。有时是使网站与 IE7 兼容的最终方法。正在使用 iframe。 iframe 可以修补所有问题 :'( 如果你检查我的网站状态，你会看到很多来自 IE7 的访问。即使在 2016 年也有很多人在使用旧浏览器！！！

标签： iframe

【解决方案1】：

我能想到（目前）人们仍然使用 iframe 而不是 AJAX 的 2 个原因：

1) iframe 规避了跨域源策略（图像、脚本和样式不规避）。这对于相对安全地从其他域名中提取站点/内容很有用。基本上，这样做的好处是能够直观地显示来自其他域的数据，而不会让它们以无限制的访问权限在您的页面上到处乱踩（就像 JSONP 能够做到的那样）。

2) 您可以从 iframe 中加载多种类型的资源，而不仅仅是某些 mime 类型（您相对受限于 application/javascript、application/x-javascript、text/css、text/xml、image/ png, image/jpeg, image/gif with scripts, XHR, images, and sources).例如，如果我想给你看一个 PDF，我可以打开一个 iframe，让 Adobe Reader 插件给你看那个文件。此外，在同一个域中，如果我想将脚本、样式和图像一起流水线化（页面上的内联，图像必须是数据 URI），我可以使用 iframe 完成此操作（如果它在同一个域、端口和协议，我也可以使用 JavaScript 访问它）。

您知道 Gmail 是一组 iframe 吗？可见的部分只是巧妙的定位。此外，许多 OAuth 实现（Twitter、Facebook、Google、Yahoo!）通常使用 iframe 将其域中的用户与成功的身份验证 URL 相关联（在用户登录后）。

【讨论】：

Re #1，但是 HTTP 标头可以阻止 iframe .....
Re #2，但你可以在没有 iframe 的情况下做到这一点，例如 <embed src="http://www.pdf995.com/samples/pdf.pdf" type="application/pdf">
Re #3，Gmail 可以在没有 iframe 的情况下重写。 那么为什么人们仍然在现代浏览器中使用 iframe？ 这个问题没有得到解答。

【解决方案2】：

IFRAME 用于将第三方内容嵌入和隔离到网站中。

大多数网络广告解决方案都基于 iframe - 因为它们提供安全性（跨域策略）和屏幕上的隔离矩形，可以完全由第三方内容和脚本管理（常见的用例是广告）。

IFRAMES 的另一个现代用途是管理 AJAX 应用程序的历史记录（常见的后退按钮解决方法）。

FRAME 是 IFRAMES 的劣质版本。它们的使用正在减少。

【讨论】：

这更简单，也是很好的广告示例：)

【解决方案3】：

如果用户禁用了 javascript，则 iframe 将在 ajax 未启用时工作。考虑到人们使用NoScript 之类的东西，这不是不可能的。

【讨论】：

这是真的，但是在大多数情况下更改/添加/操作 iframe 需要 JavaScript（除了我能想到的 2 个，链接到目标和<form> 发布到目标）。
对；即便如此，使用 JS 更改 iframe 指向的内容通常需要一行，而不是 XMLHttpRequest 的更大复杂性。

【解决方案4】：

当我需要在不重新加载页面的情况下上传文件时，我会在 ajax 网站上使用它们。

【讨论】：

【解决方案5】：

我仍然看到 iframe 在大公司中使用，它们提供一个单一标志，在该标志上注入有关经过身份验证的用户的标头信息，然后通过 iframe 将其传递给实际应用程序。由于围绕 iframe 的“门户”处理所有特定的身份验证细节，因此其背后的应用程序不需要为每个应用程序实现，从而使开发团队更容易做事，并有一个单一的地方来监控和调整身份验证细节用户数。

【讨论】：

不明白为什么不能使用 XMLHttpRequest (w3.org/TR/XMLHttpRequest/#the-setrequestheader-method) 添加标头，除非域、协议和端口不匹配（这意味着您的问题与标头不同）？
关键是它是两种不同的应用程序，通常甚至是两种完全不同的技术。一个处理身份验证，另一个获取身份验证票的注入标头（或在需要时构建它）。

【解决方案6】：

使用它们有很多技术原因（尤其是 Dan Beam 提到的安全问题）。

您不应该使用“类似框架”的 iframe，仅通过更新 iframe 来导航到新页面。正如您所说，这会阻止导航成为书签/可链接，响应正常的导航按钮，并提供有用的链接功能，如在新标签中打开。

但这并不是 iframe 独有的。通过使用XMLHttpRequest 获取新内容并将其写入主内容div 的innerHTML，您可以看到越来越多的导航页面。通常这是通过 jQuery load() 和聪明的滑动动画来完成的。这会像 iframe-used-as-frame 一样严重地破坏导航，或者确实是老式的框架集。很遗憾，这么多网络作者使用这种策略，认为它是一种超现代的网页设计方法，而实际上它只是昨天被鄙视的框架集的新皮肤。

您可以在这两种情况下解决它，但这意味着您必须在# 片段标识符部分中存储视图状态并支持正确的哈希导航，这并非易事。即使这样，你仍然会遇到像搜索引擎这样的非 JS 代理的问题；您最终必须拥有基于? 和# 的并行导航来支持两者。这是一种痛苦，大多数人都不会打扰。

【讨论】：

期待 HTML5 中的 History API，它将允许在不重新加载或破坏后退/前进按钮的情况下获取内容。

【解决方案7】：

从 HTML 5 开始，框架集已经过时，有时您需要在一个站点中拥有一个包含另一个站点的框架。 AJAX 也只能做这么多。尝试在没有 iframe 的情况下通过 https 将文件上传到另一个域上的站点。 AJAX 帮不了你。

【讨论】：

【解决方案8】：

除了其他原因，我在我的应用程序中有一个特定的 iframe 用法。不幸的是，我的目标浏览器是Internet Explorer 6。我需要在我的网页中固定页脚和页眉。此页面的主要部分是可滚动的。

但是，有一个bug in IE6 无法使用z-index CSS 属性在select 元素之上显示div 元素。因此，我需要创建一个 iframe 来作为 hack 来避免这个问题。

当然，这是iframe 的一个非常具体的用法，只关注IE6...

【讨论】：

【解决方案9】：

Javascript WYSIWYG 编辑器使用 iframe，因为这是制作它的最简单和最好的方法。例如 TinyMCE 使用它：

http://tinymce.moxiecode.com/

【讨论】：

【解决方案10】：

我正在构建一个社交网络，我发现 iframe 可用于将小部件放在其他人的网站上，以像迷你个人资料一样显示或与远程服务器上的内容集成。似乎是构建它的最简单方法。我知道一些小部件使用 JavaScript。同样使用 iframe 方法，会话与正常访问网站一样，非常适合点赞按钮。

【讨论】：

【解决方案11】：

许多格式化文本编辑器（例如 TinyMCE、HTMLArea）都是作为 iframe 实现的。

【讨论】：

这是因为 FireFox IIRC。

【解决方案12】：

iFrame 在某些情况下是可以的，例如 X 域请求或通过参数将数据发布到源。但是当我想跨域访问数据时，我更喜欢使用 CSS 文件——它们可以接受参数、设置 cookie、向页面添加内容（:before & :after）并提供视觉反馈。

【讨论】：