不使用 IFrame 的原因？

Posted 2023-03-05

【中文标题】不使用 IFrame 的原因？

【英文标题】：Reasons for not using IFrame?

【发布时间】：2010-11-18 03:36:28

【问题描述】：

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

【问题讨论】：

看到这个问题：***.com/questions/362730/…

仅供参考：多个答案很棒。检查所有这些，而不仅仅是接受的。

This 可能会有所帮助

【参考方案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】：

优点：

帮助处理缓慢的第三方内容，例如徽章和广告 安全沙盒 并行下载脚本

缺点：

即使空白也很昂贵 阻止页面加载 非语义

来源：Best Practices for Speeding Up Your Web Site

【讨论】：

您页面上的任何资源都可以阻止页面加载，例如图片和视频。更现代的方法总是使用 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 不是来自同一个域，安全沙盒会导致 JavaScript 出现问题。 除非您自己控制样式表，否则您无法让 CSS 在 IFrame 和父页面之间进行协作。 从索引的角度来看，IFrame 的内容不存在。 出于同样的原因，屏幕阅读器可能不喜欢 IFrame。否则它们将无法正确指示 IFrame 内容的相对含义。

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

【参考方案7】：

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

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