为什么不在页面内容中使用 iframe 的好理由 [英] Good Reasons why not to use Iframes in page content
问题描述
好的，所以我正在寻找一些很好的理由不在页面内容中使用 iFrame.我的朋友开始为我们的聊天框使用 iFrame 并加载 html 页面，而不是仅使用 ajax 加载所需的参数并长时间轮询请求.一旦我们有了参数，我们就用我们的内容填充一些 div.
Ok so I am looking for some good reasons as to not use iFrames in page content. My friend who is set on using an iFrame for our chatbox and loading an html page instead of just using ajax to load the parameters that are needed and long polling the request. Once we have our parameters we then fill in some divs with our content.
我最大的理由
为什么同时加载两个页面
Why load two pages simultaneously
需要更多的代码来注入 iFrame
More coding is needed to inject to the iFrame
有没有人知道可能出现的任何其他可能的冲突和问题?我知道不久前 iFrame 应该被弃用，然后他们又跳回到网站上.
Does anyone know of any other possible conflicts and issues that could potentially arise? I know that a while back that iFrames were suppose to be deprecated then they leaped right back up to websites.
ps 我不确定这应该放在 SO 还是 MSO 中，如果需要，我可以移动它
推荐答案
来源:http://www.rwblackburn.com/2012/07/iframe-evil/
所以似乎我从事的每项工作都会出现相同的话题.在某些时候，有人会说，只需为此使用 iFrame".然后我需要沿着旧的疲惫的道路走下去，为什么这不是一个好主意.
So it seems that every job I work on, the same topic comes up. Someone, at some point will say, "just use an iFrame for that". Then I need to go down the old tired road as to why that would not be a good idea.
好吧，这篇文章对我来说有点实用.我希望将 iFrame 不是万能解决方案的所有原因都放在一个地方，这样我就可以在将来节省一些时间，并将人们指向这个 URL.因此，我可能会在完善这些要点时不时更新这篇文章.如果您愿意，请随意将这篇文章用于相同的目的，并将我遗漏的任何建议或要点张贴到我的推特帐户 (@rwbDev)，如果我将要点添加到本文中，我一定会感谢您.
Well, this article is going to be a bit utilitarian for me. I hope to put down in a single place all the reasons iFrames are not a cure-all solutions so that I can save myself some time in the future and just point people to this URL. As such I may update this post on occasion as I refine these points. Feel free to use this post for that same purpose if you like, and please post any suggestions or points I have missed to my twitter account (@rwbDev ), I’ll be sure to credit you if I add the point to this article.
现在，让我说清楚.iFrame 确实有一个有效的目的.我自己实际上已经多次使用 iFrame，并取得了巨大的成功.问题是人们倾向于使用它们来绕过糟糕的架构，或者只是解决问题.根据我的经验，这通常只是将一个小问题换成更大的问题，而且通常是不必要的权衡.我将在下面介绍这两点.
Now, let me be clear. iFrames do have a valid purpose. I have actually used iFrames many times myself with great success. The problem is that people tend to want to use them to get around poor architecture, or as a simply fix to a problem. In my experience this usually just trades a small problem for a much bigger problem down the road, and more often than not it’s an unnecessary trade off. I will cover both these points below.
对 SEO 不利.这是您会发现避免使用 iFrame 的最普遍原因之一.某些搜索引擎可能难以处理 iFrame 中引用的页面.这对网站或页面的搜索排名有多大影响尚不完全清楚.然而，与我交谈过的大多数专家都同意它肯定会产生一些影响.看看这个关于热带的有趣表格帖子.有关 SEO 如何工作的详细信息，以及像这样的设计决策的影响，我建议查看 seomoz.org.如果您的页面或应用程序不关心 SEO，这当然不是问题.例如，需要登录的应用程序(无论如何，搜索引擎都无法访问登录后的所有页面).* 注意(2013 年 6 月 6 日添加):最近的测试表明，搜索引擎实际上可能会跟踪 iFrame 中的链接.这意味着 iFrame 的 SEO 影响比过去小得多.目前还不清楚是否有影响，不同的搜索引擎在这方面的表现可能有所不同.
Bad For SEO. This is one of the most prevalent reasons you will find for avoiding iFrames. Some search engines may have difficulties with the pages referenced within iFrames. How much this affects a site’s or page’s search ranking is not fully know. However most experts I have talked to agree that it definitely has some impact. Check out this interesting form post on the tropic. For detail on how SEO works, and impacts of design decisions like this I would suggest checking out seomoz.org . This of course is not an issue if SEO is not a concern for your page or app. For example an application which requires a login (all the pages behind the login are not accessible to the search engines anyhow). * Note (added June 6th, 2013): Recent tests have shown that search engines may in fact follow links within an iFrame. This means the SEO impact of an iFrame is much less then it has been in the past. It is still unclear that there is no impact, and different search engines may behave differently in this regards.
链接/书签.除非您引入额外的 JavaScript，否则用户将无法直接获得 iFrame 中内容的链接.这包括某人可能通过电子邮件发送给朋友的链接、书签或出现在搜索引擎结果中的页面.想象一下您的用户访问您的页面，并且一些内容在 iFrame 中.他们单击 iFramed 内容中的链接.此内容将按预期保留在 iFrame 中.现在，您的用户在 iFrame 中找到了他们导航到的一些内容，并希望将其发送给朋友.但是在他们的浏览器中复制 URL 是行不通的，这只会将朋友发送到初始页面，原始内容显示在 iFrame 中.有一些脚本可以解决这个问题.我自己已经实现了几次(在我别无选择的情况下).然而，这些通常会引入一些他们自己的问题，并且经常有跨浏览器的兼容性问题.通常它也是正确的越野车.同样，根据您的网站或应用程序的需求，这可能不是问题，但对于大多数网站来说这是一个大问题.
Linking/Bookmarks. Unless you introduce extra JavaScript, the user will not be able to obtain a link directly to content within the iFrame. This includes links someone might email a friend, bookmarks, or pages that come up in a search engine result. Imagine your user goes to your page, and some content is in an iFrame. They click a link in the iFramed content. This content will stay within the iFrame as expected. Now your users finds some content they have navigated to within the iFrame and would like to send it to a friend. But copying the URL in their browser will not work, that would just send the friend to the initial page, with the original content displayed in the iFrame. There are scripts out there which can get around this. I have implemented these myself a few times (in situations where I had no choice). However these often introduce some of their own issues and often have cross-browser compatibility problems. Often it is down right buggy too. Again, depending on your site or your application’s needs, this may not be an issue, but this is a big issue for most sites.
调试困难.这是人们经常忽视的一个问题.如果您有一个健壮的应用程序，其中包含复杂的 jQuery、Ajax 和整个页面中发生的其他很酷的东西——iFrames 会使调试问题变得更加困难.错误是发生在外页还是框架内的页面?浏览器开发人员工具可以帮助解决这个问题，但即使是这些工具，在您处理 iFrame 时也不一定能清楚地说明问题出在哪里.当页面位于 iFrame 内时，错误会被复制的频率如此之高，但在 iFrame 外加载时却能正常工作，您会感到惊讶.这是任何网站的问题.但特别是对于广泛使用 iFrame 的网站.系统中的活动部件越多，诊断问题就越困难.
Difficulty with Debugging. This is one which people often overlooked. If you have a robust application with complex jQuery, Ajax, and other cool stuff happening all over the page – iFrames can make debugging a problem much more difficult. Is the error happening in the outer page, or the page within the frame? Browser developer tools can help with this, but even those tools don’t always make it clear where the issue is when you are dealing with an iFrame. You would be surprised how often a bug can be replicated when a page is within an iFrame, but works just fine when loaded outside the iFrame. This is an issue for any site. But especially for sites that use iFrames extensively. The more moving parts there are to a system, the harder it is to diagnose a problem.
没有真正的性能提升.偶尔我会发现有人想要使用 iFrame，因为他们觉得这会提高他们网站的性能.他们通常会有这种感觉，因为这样可以避免在站点分页时重新加载站点的页眉/页脚/菜单.通常情况下，情况正好相反.事实上，根据我的经验，与修复应用程序的架构相比，它从未带来性能提升.首先，考虑浏览器将缓存图像、CSS 和 JS 文件.因此，无论如何这些都不会随每个页面重新加载.但更重要的是，按照这些思路思考的人经常将 iFrame 视为穷人的 AJAX.然而，iFrame 分页的内容几乎总是比真正的 AJAX 调用重，后者使用 XML 或 JSON 加载和刷新页面内容的一小部分.
No real performance gains. Once in awhile I will find someone who wants to use an iFrame because they feel it will increase their site’s performance. They usually feel this way because it will avoid having to reload the site’s header/footer/menu whenever the site paginates. More often than not, the reverse is true. In fact in my experience it has never resulted in a performance gain when compared to fixing application’s architecture. First, consider that browsers will cache images, CSS, and JS files. So these will not reload with every page anyhow. But more importantly people who are thinking along these lines are often looking at iFrames as if they are a poor man’s AJAX. However, the contents of an iFrame paginating is almost always going to be heavier than a true AJAX call which uses XML or JSON to load and refresh only a small parts of the page’s content.
很容易保持稳定.我以前工作的一个大型网站广泛使用了 iFrame.我不确定 NDA 在这里适用于何处，因此为了安全起见，我不会链接到他们的网站.他们经常使用它们，并且拥有用于(理论上)避免使用 iFrame 的正常缺点的所有脚本和花哨的技巧.然而，由于 iFrame 的广泛滥用和过度使用，他们的网站上仍然经常出现问题和错误.在论坛、LinkedIn、Twitter 等上，也经常有客户抱怨这给他们带来的问题.刚才我跳转到他们的网站，几分钟后发现一个页面因为 iFrame 问题而给我一个错误.这些聪明人非常了解 iFrame 的问题.然而，即使他们在多年后仍继续与它搏斗.当 iFrame 像在本网站上一样被滥用时，再多花哨的脚本也无法完全解决不可避免地出现的问题.
Its just plain difficult to keep stable. There is a large site from a former job of mine which used iFrame extensively. I am not sure where the NDA applies here, so I will not link to their site just to be safe. They use them often, and have all the scripts and fancy tricks used to (in theory) avoid the normal drawbacks of using iFrames. However there are still frequent problems and errors that pop up on their site because of the extensive misuse and overuse of iFrame. There were also frequent customer complaints posted on forums, LinkedIn, Twitter, ect, about the problem this caused them. Just now I jumped over to their site and within a few minutes found a page that gave me an error because of an iFrame issue. These are smart people who know the issues with iFrames well. Yet even they continue to wrestle with it, years later. When iFrames are abused like they are on this site, no amount of fancy scripting will fully resolve the issues that will inevitably arise.
这篇关于为什么不在页面内容中使用 iframe 的好理由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
