54

Possible Duplicate:
Are iframes considered 'bad practice'?

While working with web developers, I always hear from them that using iframes is something we must avoid as we can, and some say it's something bad, annoying and makes a lot of problems.

Also when i told my previous boss "not a developer" one day that i will use iframe, he looked at me as a bad developer :)

What i want to know, does iframes have a very bad history with web development?

Is it a disaster?

In some cases I see that it's a must to use iframes, is saying that means I am a bad developer?

Or all of that because of it's hard to deal with because of some security issues we must take care about while developing?

Please list your points if you hate it too or correct me if I am thinking the wrong way.

2
  • 7
    Something interesting I've discovered while investigating Facebook application design, I was extremely surprised to find that the majority of Facebook apps are simply iframes on Facebook.com that point to web applications on other servers. Kinda odd that one of the top websites in the world with so many visitors recommends the iframe method for application integration when its considered to be such a bad thing to use. Jun 29, 2010 at 4:03
  • 5
    Giants like Gmail, live.com also use iframes for their mail interface if you have notice.
    – MANnDAaR
    Aug 3, 2010 at 21:45

15 Answers 15

63

Iframes can have similar issues as frames and inconsiderate use of XMLHttpRequest: They break the one-document-per-URL paradigm, which is essential for the proper functioning of the web (think bookmarks, deep-links, search engines, ...).

If you're creating a web application, use whatever technique you want to (including frames, flash, applets, $whatever). If you're creating an actual, informational web page, stick to frameless HTML, CSS and unobstrusive JavaScripts and keep in mind that the page should still be usable with scripting disabled.

12
  • 3
    I agree with that. RIAs are going to be JavaScript-heavy. A web page in the traditional sense should work with JS turned off.
    – Nosredna
    Jul 4, 2009 at 2:14
  • 7
    Doesn't it depend on exactly what it is you're 'iframe'ing? The side-effects of including an entire page in an iframe are quite different from those that arise when including a 'widget' or navigation element.
    – Bobby Jack
    Jul 7, 2009 at 13:53
  • 6
    Iframes are a must when you're building something that must not be changed by the current page CSS style.
    – vsync
    Aug 24, 2009 at 16:37
  • 12
    Maybe I'm jumping the gun a little here, but I think it's ok to require your users to have JS these days. Are users willing to miss out on Google Maps? There might be a static version of it, but being able to pan and zoom with the mouse really defines the GMaps exp. Jan 12, 2010 at 4:21
  • 4
    @allyourcode: if you look at the popularity of the NoScript FF add-on and judging from my own browsing behaviour (js + flash disabled by default), making your site usable without scripting isn't unreasonable; you'll have to do it anyway to account for search engines...
    – Christoph
    Jan 12, 2010 at 8:46
21

As Nosredna said, it's probably because people confuse them with frames, and there are actually a lot of valid arguments against frames. Some of them aren't applicable to iframes, but then again some of them are.

The most striking such issue is probably that of deep linking: It's true that iframes suffer from this to a lesser extent than frames, but if you allow your users to navigate between different pages in the iframe, it will be a problem. There's also a couple of usability problems that you'll have to watch out for. The most common examble is that of double scrollbars, which I personally find incredibly annoying.

I tend to avoid iframes, mostly because I find it to be an unelegant solution. I've found that when I actually sit down and think about it, there's almost always a better solution. Despite that I also believe that there is a place for them. It's the goto of the web world: Just because it has a history of being misused, it has become consensus that it shouldn't ever be used. That really isn't the case here, but I do believe that you should think twice before using iframes.

15

I wanted to add that most of the time, iframes don't help SEO of a page either. Googlebot doesn't put the content of an iframe on the page.

2
  • It's important to realize the difference between a web application and a web page. It would be very difficult to build an A.I. bot capable of fully and automatically exploring any random application's content, considering the complex navigation interactions (gestures, timers, context, etc.) and display modes an application could exhibit. The non-existance of a sufficient generic bot to crawl all web applications should not dictate the design of all web applications. If Googlebot readability and SEO are important, then design a separate web-page for it, with links into your application.
    – Triynko
    Jul 25, 2011 at 16:01
  • Such a separate web of content pages readable by Googlebot could include individual pages with hidden content and JavaScript to automatically redirect the user into the corresponding part of your application when visited directly from a search engine. Such pages could be generated and published automatically by the application, specifically for search engines to crawl. They could even function as a dynamic content cache for the application itself.
    – Triynko
    Jul 25, 2011 at 16:07
10

There is one situation where iframes are (almost) required: when the contents of the iframe is in a different domain, and you have to perform authentication or check cookies that are bound to that domain. It actually prevents security problems instead of creating them.

For example, if you're writing a kind of plugin that can be used on any website, but the plugin has to authenticate on another domain, you could create a seamless iframe that runs and authenticates on the external domain.

2
  • 1
    This is indeed why I am looking to use them. Feb 20, 2010 at 4:43
  • I'm wondering if CORS will not prohibit the IFrame to make cross origin calls?
    – RBT
    Jul 5, 2016 at 0:29
8

I think people confuse iframes with HTML frames, and frames are pretty universally despised.

People use iframes all the time without even realizing it. If I recall correctly, TinyMCE uses iFrames.

8

One reason is security -- iframe injection attacks were pretty common. See this Ars Technica page for a description:

http://arstechnica.com/security/news/2008/03/ongoing-iframe-attack-proving-difficult-to-kill.ars

and another page that summarizes some vulnerabilities (I don't know how many of these are valid for the current crop of browsers, but the article's not that old):

http://www.thespanner.co.uk/2007/10/24/iframes-security-summary/

On the other hand, they enable cross domain communication, and are used quite commonly by "ajaxy" webapps:

http://softwareas.com/cross-domain-communication-with-iframes

5

There is nothing wrong with Iframes for building web applications. They allow a combination of targeted content with memory encapsulation. How many times did someone build some slick little javascript ajax thing that totally blew chunks when they forgot and uploaded the latest Jlibrary to their parent page or some DIV loaded content? Most of the other issues surround SEO which only matter if you actually wanted to steal someone elses content which is pretty dumb anyway. Iframes give you encapsulated memory and the ability to share well designed pages across multiple sites. Despite what many would have you believe, Iframes and or their equivalents will be around for a very long time.

4

One problem is that they have their own page lifecycle so interactivity between host and iframe child is limited (query string, session variables or JS). An alternative would be to consider using a scrolling div.

Another problem is printing. The output of an iframe (or a scrolling div for that matter) can be unpredictable and varies wildly between different browsers.

2
  • I agree. I've been working on printing the content of an iframe for about a week now, and it's anything but consistent.
    – Dave
    Mar 22, 2010 at 20:11
  • At least with a scrolling div, it doesn't have to be a scrolling div when printed...
    – SamB
    May 30, 2010 at 21:17
4

I think IFrames have their place. I wouldn't use them on front-end/public-facing web-sites due to problems with SEO etc. For an internal/back-end web-app I think they are useful when you need to isolate the styling of a particular section from the rest of the page, e.g. a report viewer or an HTML editor, where inherited styles from the parent page could cause a problem if all the content was in one document. My 2c...

3

One reason they're rejected is because they're inherently slow. By the time the iframe begins loading its host page is already in an advanced stage of the loading pipeline. Iframes and snappy browsing are almost impossible to combine.

3

iframes of today have a bad name because of iframe support in past browsers. Similar to VB.NET having a bad rap due to VB6 history. I use them these days where needed...just keep in mind that it is possible for it to not work as you had planned every now and then and to account for that.

2

I guess because it goes against the whole html-describes-contents + css-does-the-visual-design fundamentalism. Also overuse of iframe is waste of performance since it's making separate calls to fetch the frame. If you think about it AJAX basically is like iframe, except it's trendy today (may not be in the future).

Security wise, it kinda is problematic because the user could load total crap from other domain without even knowing.

1
  • How is future of AJAX ? What will replace it? I do not see Websocket will replace it. They are 2 different animals. Jul 10, 2013 at 15:16
0

HTML elements should not have behavior.

-1

You shouldn't use iframes for design. CSS does a way better job for the same thing and allows a lot more liberty too.

1
  • Iframes are actually good to use if you want to force-localstorage-cache the page because you can make your index page a script that detects if the subpage is in localstorage, document.write from localstorage if its there, and if not add in an iframe to that subpage which has a script to store its HTML element's outerhtml in localstorage.
    – user7892745
    May 5, 2017 at 18:34
-7

It's bad practice, and a lazy way of writing good (read: does what the customer wanted) code. A search for "iframe bad" on Google (without quotes) brings up many forum discussions on the topic. If you really need to bring in external content, use AJAX. Better yet, don't do it at all.

2
  • 6
    Probably the most common mistake we make in our automatic thinking is overgeneralization.
    – Christophe
    May 22, 2011 at 3:05
  • 1
    + 1 to the above comment. A lot of people confuse web applications and web pages and confuse the proper uses of iFrames with improper uses of iFrames. Many have not been put in a position where iFrames are necessary and thus deem them useless overall. Ironically, a well known handful of JS Plug-ins utilize iFrames and people don't even realize it! Over generalization is indeed something that needs to be addressed.
    – calcazar
    Jan 26, 2015 at 4:04

Not the answer you're looking for? Browse other questions tagged or ask your own question.