javascript - 为什么不在页面内容中使用Iframe的好理由

来源：http://www.rwblackburn.com/2012/07/iframe-evil/

所以看来我工作的每一份工作都会出现同样的话题。有人会说，“只需使用iFrame”。然后我需要沿着旧的疲惫的道路走下去，为什么那不是一个好主意。

嗯，这篇文章对我来说有点功利。我希望在一个地方放下iFrames不是万灵药解决方案的所有原因，以便我可以在将来节省一些时间，并将人们指向此URL。因此，我可以随时更新这篇文章，因为我提炼了这些要点。如果您愿意，请随意将此帖用于同一目的，并将我错过的任何建议或要点发布到我的Twitter帐户（@rwbDev），如果我在本文中添加要点，我一定会相信您。

现在，让我说清楚。 iFrame确实有一个有效的目的。我实际上已经多次使用iFrames取得了巨大的成功。问题是人们倾向于使用它们来解决糟糕的架构问题，或者只是简单地解决问题。根据我的经验，这通常只是为一个更大的问题交换一个小问题，而且往往是不必要的权衡。我将在下面提到这两点。

不适合搜索引擎优化。这是避免使用iFrame的最常见原因之一。某些搜索引擎可能在iFrame中引用的页面有困难。这对网站或网页的搜索排名有多大影响并不完全清楚。然而，我所谈到的大多数专家都认为它确实会产生一些影响。查看热带地区这篇有趣的表格帖子。有关SEO如何工作的详细信息以及此类设计决策的影响，我建议您查看seomoz.org。如果SEO不是您的页面或应用程序的问题，这当然不是问题。例如，需要登录的应用程序（无论如何，搜索引擎都无法访问登录后面的所有页面）。 *注意（2013年6月6日添加）：最近的测试表明，搜索引擎实际上可能跟随iFrame中的链接。这意味着iFrame的SEO影响远远低于过去。目前尚不清楚没有影响，不同的搜索引擎在这方面可能表现不同。

关联/书签。除非您引入额外的JavaScript，否则用户将无法直接获取iFrame内容的链接。这包括某人可能通过电子邮件发送给搜索引擎结果中出现的朋友，书签或网页的链接。想象一下，您的用户会转到您的页面，而某些内容则位于iFrame中。他们单击iFramed内容中的链接。此内容将按预期保留在iFrame中。现在，您的用户会在iFrame中找到他们导航到的一些内容，并希望将其发送给朋友。但是在他们的浏览器中复制URL将不起作用，这只会将朋友发送到初始页面，原始内容显示在iFrame中。有一些脚本可以解决这个问题。我自己实施了几次（在我别无选择的情况下）。然而，这些通常会引入一些自己的问题，并且经常会出现跨浏览器兼容性问题。通常它也是正确的马车。同样，根据您的网站或您的应用程序的需求，这可能不是问题，但对于大多数网站来说这是一个大问题。

调试困难。这是人们经常忽视的问题。如果你有一个强大的应用程序，复杂的jQuery，Ajax和其他很酷的东西发生在整个页面 - iFrames可以使调试问题变得更加困难。错误发生在外部页面或框架内的页面中吗？浏览器开发人员工具可以为此提供帮助，但即使这些工具也无法始终清楚地说明处理iFrame时的问题所在。当页面在iFrame中时，您会惊讶地发现错误的复制频率，但在iFrame外部加载时效果很好。这是任何网站的问题。但特别是对于广泛使用iFrame的网站。系统中运动部件越多，诊断问题的难度就越大。

没有真正的性能提升。有一段时间我会找到一个想要使用iFrame的人，因为他们觉得这会增加网站的性能。他们通常会这样想，因为它会避免在网站分页时重新加载网站的页眉/页脚/菜单。通常情况恰恰相反。事实上，根据我的经验，与修复应用程序的体系结构相比，它从未带来性能提升。首先，考虑浏览器将缓存图像，CSS和JS文件。因此无论如何这些都不会重新加载。但更重要的是，正在考虑这些问题的人经常将iFrame看作是穷人的AJAX。但是，iFrame分页的内容几乎总是比真正的AJAX调用更重，后者使用XML或JSON来加载和刷新页面内容的一小部分。

它很难保持稳定。我的一个以前的工作有一个大型网站广泛使用iFrame。我不确定NDA在这里适用的地方，因此我不会为了安全而链接到他们的网站。他们经常使用它们，并且使用所有脚本和花哨的技巧（理论上）避免使用iFrame的正常缺点。但是，由于广泛滥用和过度使用iFrame，网站上仍然会出现频繁出现的问题和错误。在论坛，LinkedIn，Twitter等上发布了频繁的客户投诉，关于这引起了他们的问题。刚才我跳到他们的网站，几分钟后发现一个页面因为iFrame问题而给我一个错误。这些都是聪明的人，他们非常了解iFrames的问题。然而，多年后他们甚至继续与之搏斗。当iFrames像他们在这个网站上一样被滥用时，没有多少花哨的脚本可以完全解决不可避免会出现的问题。

iframe为页面上下文增加了灵活性，因为它们是将内容分成多个页面的简单而可靠的方式。它也可能对沙盒＆＃34;有用。将内部页面转换为iframe，这样不好/丢失的标记不会影响主页面。

缺点是如果你引入多层滚动（一个用于浏览器，一个用于iframe），用户将会感到沮丧。

某些浏览器不支持iFrame，在iFrame中，您的网站可能包含您的内容，其他网站的内容，但内容可能随时更改，您可能会或可能不会批准的内容。即使空白，也要花钱。阻止页面remianing onload是不需要的，而不是语义

你不能让CSS在IFrame和父页面之间合作，除非你自己控制样式表。如上所述，确实是 -

我们无法使用I Frame获得良好的性能，有些搜索引擎可能在i帧中引用的页面有困难。这对网站或网页的搜索排名有多大影响并不完全清楚。我的建议是首先简单地使用所有其他选项。不要只是跳转到iFrame解决方案，因为它表面看起来很容易。

重要原因是：

性能下降。
iframe阻止<button id="upload-profile-button" type="button" class="btn btn-primary">Submit</button>事件 onload事件主要由Web开发人员用于启动UI操作，例如关注加载时的登录fiels。

为什么不在页面内容中使用Iframe的好理由

4 个答案: