iframe 与 ajax [关闭]答案

【问题标题】：iframes vs ajax [closed]iframe 与 ajax [关闭]
【发布时间】：2009-04-20 13:22:16
【问题描述】：

假设我有一些选项卡（例如 jquery 选项卡）并且我想在每个选项卡中动态加载一些页面，我可以通过两种方式做到这一点

第一季度。我认为两种用户方法之间没有区别，是吗？

第二季度。我认为 iframe 方式更好，因为 iframe 可以加载任何页面，但有时将 ajax 数据加载到 div 中可能无法按预期工作。

【问题讨论】：

标签： ajax iframe

【解决方案1】：

首先，在包含的页面（或 ajax 调用）中出现错误可能更好地使用 ajax 方法来处理。使用 iframe，您只会在页面中间收到丑陋的 404 或 500 错误。但是使用 ajax 可以检测到错误并显示更用户友好的错误消息。

这还取决于您要加载到页面中的数据。如果您控制正在加载的 html，则可以避免或修复任何可能出现的显示问题。如果您需要加载您无法控制的页面，最好（或必须）使用 iframe。

这两种方法都可能涉及可访问性问题，但我对此还不够熟悉，无法确定哪种方法最适合屏幕阅读器等。

【讨论】：

【解决方案2】：

如果页面是您的内容，并且您可以控制样式表以及每个页面访问的所有内容...那么选择第一个选项。您可以设计一些东西，这样您就不必多次检索共享内容。

如果页面超出您的控制范围（外部网站等），则将它们加载到 iFrame 中。您不必担心页面是否正确呈现等问题。

【讨论】：

【解决方案3】：

通过混合 iframe 和 ajax，如果您的加载页面（iframe 尝试加载的页面）没有立即响应从而产生一个空白块，iframe 可能会由于呈现而在大多数浏览器中停止其他 ajax 请求。

另一方面，iframe 更强大，您可以拥有堆栈框架，尤其是透明背景，而不用担心它的宽度或高度，它看起来就像没有框架的同一个页面。

【讨论】：

【解决方案4】：

使用 iframe，如果内容是从外部站点加载的并且事先不知道宽度和高度，您可能会遇到滚动条问题。使用 ajax 和 DOM 操作，您将不会遇到这个问题。

这是我在特定情况下放弃 iFrame 的唯一原因。报告加载到 iframe 中的远程站点的宽度和高度的非常hacky 的解决方案根本不值得麻烦。

【讨论】：

【解决方案5】：

注意您的源内容在哪里。如果它在您的域中，您可以使用 iframe 或 ajax 调用。但是，如果它位于不同的域中，则由于其“跨站点脚本”保护，您无法使用 ajax。

我认为这是在 iframe 和 ajax 调用之间进行选择的主要方面。

【讨论】：

有一种方法可以解决这个问题，例如在 Java 中使用 Access-Control-Allow-Origin 可以设置：response.addHeader("Access-Control-Allow-Origin", "*");。
@Ithar：确实如此。但是你假设你可以控制为你的选项卡提供内容的服务器端代码。