不使用 IFrame 的原因？答案

【问题标题】：Reasons for not using IFrame?不使用 IFrame 的原因？
【发布时间】：2010-11-18 03:36:28
【问题描述】：

是否有任何理由不使用 iframe？我目前使用它从不同的服务器加载页面（注册页面 - 分布式应用程序的一部分）以提供无缝体验。使用 iframe 被认为是不好的做法还是可以使用？

【问题讨论】：

标签： iframe

【解决方案1】：

iframe 是一个很棒的工具。它享有近乎通用的浏览器支持，易于实现并具有许多有用的功能。与任何其他 HTML 元素一样，它可以被滥用，但巧妙地使用它可以在可靠的 UI 中发挥作用。

一些开发人员可能会争辩改用 AJAX，在某些情况下这可能是更合适的方法，但 AJAX 不是万能药，而 iframe 可以是一种更简单的实现，它对您的用户具有相同的最终结果。首先做最简单的事情，并且只有在您能够验证它是如何以及为什么不起作用时才进行更改。

【讨论】：

我想做 AJAX，但由于提到的注册页面来自不同的子域，我无法做到（跨域问题）
@Alex 你总是可以通过编写自己的 Web 服务来解决跨域问题，该服务从其他域获取并重新显示数据，并从你的 AJAX 调用 that代替代码。但是，正如我在回答中所说，如果 iframe 已经完成了您的需求，请不要过度设计它或花费不必要的时间。

【解决方案2】：

继续使用 iframe。 下面是一个示例：

Visa 验证的整个事情真的让我很恼火。当我被重定向到一个我从未听说过的网站（not visa.com）时，我很高兴在我信任的某个网站购物，我必须填写其他表格并希望我被正确重定向回购物网站。

然后最近我在 John Lewis 网站上购物，他们在 iframe 中打开了 Verified By Visa 页面 - 太棒了！我仍在查看 John Lewis 的网站，但正在发生的只是我被要求输入我的 Verified By Visa 密码 - 没问题。

虽然作为一名网络开发人员，我知道这与普通的旧重定向-那里-重定向-返回之间没有技术差异，但用户体验要好得多！

【讨论】：

这很重要，但我会说相反，当输入信用卡数据时，我宁愿完全在 Verified By Visa (Paypal) 网页中（网址在地址栏中很容易看到) 而不是将我的信用卡数据输入到某人网站的 iframe 中。
@Marco Demaio：Visa 验证页面包含我在注册该计划时输入的安全短语，所以我知道它是真实的。是的，理论上 John Lewis 的某个人可以代理 Verified By Visa 内容并嗅探我的结果，但这就是为什么我说“我很高兴在我信任的某个网站购物”——我相信 John Lewis 不会那样做。 Verified By Visa 的 URL 是一些您从未听说过的地址，因此看到它实际上会降低您的信任。

【解决方案3】：

优点：

缺点：

【讨论】：

您页面上的任何资源都可以阻止页面加载，例如图片和视频。更现代的方法总是使用 DOMContentLoaded，它不会阻止 iframe。而且我不明白这里的非语义是什么意思。如果为空白，成本高，有参考吗？
您作为来源提供的链接真的很有帮助:)

【解决方案4】：

iframe 可以访问父文档的某些属性，例如使用parent.location.href 或parent.window.location 将父框架重定向到新位置（IE 允许限制）。

当嵌入来自其他服务器的内容时，这对于网络钓鱼攻击非常有用（即使您相信该服务器也可能受到威胁）。

iframe 还可用于各种其他攻击：IFrames security summary。

【讨论】：

【解决方案5】：

使用 HTML 5，您将能够使用跨文档消息传递 API 在窗口之间发送消息，但目前 iFrame 是任何需要样式和脚本加载的 AJAX 最可行的替代方案。数据。

如果您只想在 iFrame 中使用文本数据，请改用 AJAX。如果您希望外部 CSS 或 JavaScript 在受保护的环境中工作，希望样式从头开始，或者需要访问跨域文档，请使用 iFrame。

缺点是 iFrame 的可访问性通常很糟糕，尽管您可以通过确保在 iFrame 中通知屏幕阅读器的外部内容来防止这种情况。还要检查 HTML 规范以了解使 iFrame 更易于访问的其他方法。除了这些和脚本方面的明显限制之外，iFrame 是一个很好的工具，可以负责任地和稀疏地使用。

最后一点，堆满 iFrame 的页面绝对不是一个好主意，因为请记住，对于每个加载的 iFrame，都会创建一个 DOM，发出 HTML 请求并实例化文档包装器，在此过程中占用内存和带宽.将页面上的 iFrame 保持在最低限度，您将避免滥用 HTML 领域中的强大工具。

【讨论】：

【解决方案6】：

IFrame 是在网页中“包含”外部内容的好方法。但是，有几个（小）缺点：

除此之外，他们很棒！如果您考虑一下，我提到的几点甚至可能被认为是优势（屏幕阅读器除外）：原则上，IFrame 不能影响其父页面的布局，并且它本身也不受其父页面的影响。

【讨论】：

【解决方案7】：

一般来说，由于 SEO 原因，iframe 是一种糟糕的体验。那么，你问有什么理由不使用 iframe 吗？是的，如果您使用 iframe，您将失去在搜索引擎中的一些自然展示位置。

当然，可用性问题可以（并且应该）胜过页面的 SEO 价值。

【讨论】：