Good Reasons why not to use Iframes in page content [closed]

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.

My Biggest Reasons

Why load two pages simultaneously
More coding is needed to inject to the 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 I wasn't sure if this should go in SO or MSO if need be I can move it

Solution 1:

Source: http://www.rwblackburn.com/2012/07/iframe-evil/

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.

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.

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.

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.

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.

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.

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.

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.

Solution 2:

iframes add flexibility to the page context as they're a simple and reliable way to separate content onto several pages. it may also useful to "sandbox" internal pages into an iframe so poor/missing markup will not affect the main page.

The downside is that if you introduce multiple layers of scrolling (one for the browser, one for the iframe), users will get frustrated.

Solution 3:

Some Browsers Don’t Support iFrames,In an iFrame, Your website may have your content on it, with another website’s content, but the content can change anytime, to material that you may or may not approve of.Some problems like Costly even if blank. Blocks page remianing onload that is unwanted,and not semantic

You cannot get CSS to co-operate between the IFrame and the parent page, unless you control the stylesheets themselves.As mentioned above it is true that-

We can't gain good performance using I Frame, Some search engines may have difficulties with the pages referenced within i Frames. How much this affects a site’s or page’s search ranking is not fully know. My suggestion would be to simply using all other options first. Don’t just jump to the iFrame solution because it seems easy on the surface.

Solution 4:

Important reasons are:

slower performance.
Iframes block onload event.
onload event is mostly used by the web developers to initiate UI actions like focus on login fiels on load.