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.

Community
  • 1
  • 1
Amr Elgarhy
  • 66,568
  • 69
  • 184
  • 301
  • 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. – Jake Wilson Jun 29 '10 at 04:03
  • 5
    Giants like Gmail, live.com also use iframes for their mail interface if you have notice. – MANnDAaR Aug 03 '10 at 21:45

15 Answers15

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.

Christoph
  • 164,997
  • 36
  • 182
  • 240
  • 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 04 '09 at 02: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 07 '09 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 '09 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. – allyourcode Jan 12 '10 at 04: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 '10 at 08:46
  • 1
    @allyourcode: not necessarily okay -- google maps is never going to work in ELinks. (Of course, [i]frames probably never will either.) – SamB May 30 '10 at 21:10
  • @allyourcode: Google maps is a typical web application, and as **Christoph** said; in web applications you can use whatever technology you like. But for plain informative pages, everyone should be able to read it properly without having any fancy technology enabled. – awe Aug 25 '10 at 07:56
  • 1
    @awe agreed, but you're probably not going to invest the time to put lots of fancy scripting on pages that are just informational. For more interesting pages, you're going to want to do things that can't be done any other way. In that case, if you want a functional app for nojs users, it has to be completely different, and will inevitably not be as fun for the user. – allyourcode Aug 27 '10 at 00:05
  • I find iFrames to be very useful when I need to load an ASPX sub-page with editable controls that have post-back event handlers and may require ASP.NET features like view state encryption. For example, consider a database documentation page menu listing tables, functions, etc. that when clicked displays a sub-page with the object's properties (columns, parameters, etc.) with editable description fields. Even with postback (to update URL), this modular design is architecturally simpler, more flexible, and works better with ASP.NET than using AJAX, which would complicate postback handling. – Triynko Jul 25 '11 at 15:48
  • 3
    ^typical MS Developer.. never care and try to understand design standards :D – Phyo Arkar Lwin Apr 30 '13 at 18:30
  • 1
    @V3ss0n right on brother. – CodeMoose Jun 21 '13 at 17:41
  • 1
    Everyone has to have scripting enabled to use the search engine to find your website. So, I just add in a at the top. That being said, it is still best performance practices to avoid using Javascript only when possible because Javascript is super fast, but CSS is generally even faster when it comes to DOM manipulation. –  May 05 '17 at 18:30
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.

Emil H
  • 39,840
  • 10
  • 78
  • 97
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.

marcc
  • 12,295
  • 7
  • 49
  • 59
  • 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 '11 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 '11 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.

Philippe Leybaert
  • 168,566
  • 31
  • 210
  • 223
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.

Nosredna
  • 83,000
  • 15
  • 95
  • 122
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

ars
  • 120,335
  • 23
  • 147
  • 134
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.

TheRealWorld
  • 51
  • 1
  • 1
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.

Troy Hunt
  • 20,345
  • 13
  • 96
  • 151
  • 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 '10 at 20:11
  • At least with a scrolling div, it doesn't have to be a scrolling div when printed... – SamB May 30 '10 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...

JonoW
  • 14,029
  • 3
  • 33
  • 31
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.

ErikE
  • 48,881
  • 23
  • 151
  • 196
Andrew Siemer
  • 10,166
  • 3
  • 41
  • 61
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.

Joeri Sebrechts
  • 11,012
  • 3
  • 35
  • 50
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.

Eugene Yokota
  • 94,654
  • 45
  • 215
  • 319
0

HTML elements should not have behavior.

geowa4
  • 40,390
  • 17
  • 88
  • 107
-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.

Partial
  • 9,529
  • 12
  • 42
  • 57
  • 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. –  May 05 '17 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.

zacharyliu
  • 25,578
  • 4
  • 21
  • 15
  • 6
    Probably the most common mistake we make in our automatic thinking is overgeneralization. – Christophe May 22 '11 at 03: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 '15 at 04:04