tags:

views:

483

answers:

7

Hello,

are there any reasons not to use iframes at all? I currently use it to load a page from a different server (a sign up page - part of a distributed application) to provide a seamless experience. Is using iframes considered bad practice or is its use OK?

+3  A: 

The iframe is a great tool. It enjoys near-universal browser support, it's easy to implement and has a number of useful functions. As with any other HTML element, it can be abused, but wielded intelligently it can play a part in a solid UI.

Some developers might argue to use AJAX instead, and in some situations that may be the more appropriate approach, but AJAX is not a panacea and iframes can be a far simpler implementation which has the same end-result for your users. Do whatever is simplest first, and only change that when you can verify how and why that is not working.

Rex M
I wanted to do AJAX but as the mentioned sign up page is coming from a different subdomain I couldn't do it (cross domain problem)
Alex
@Alex you can always get around the cross-domain problem by writing your own web service which fetches and re-displays data from other domains, and call *that* from your AJAX code instead. However, as I said in my answer, if an iframe already accomplishes what you need, don't over-engineer it or spend more time than necessary.
Rex M
+5  A: 

Keep using iframes. Here's an example of why:

The whole Verified By Visa thing really annoys me. I'm happily shopping at some site that I trust, when I'm redirected to some site I've never heard of (not visa.com) and I have to fill in some other form and hope that I get redirected correctly back to the shopping site.

Then recently I was shopping at the John Lewis website, and they brought up the Verified By Visa page in an iframe - wonderful! I'm still looking at the John Lewis site, and all that's happening is I'm being asked for my Verified By Visa password - no problem.

Although as a web developer I know that there's no technical difference between that and a plain old redirect-there-redirect-back, the user experience is so much better!

RichieHindle
@RichieHindle: that's a point, but I would say the opposite, when entering credit card data I would rathre prefer to be entirely in the Verified By Visa (Paypal) webpage (with the url easily visible in the address bar) rather that entring my credit card data in an iframe of someone's website.
Marco Demajo
@Marco Demaio: The Verified By Visa page includes a security phrase that I entered when I registered with the scheme, so I know it's real. Yes, in theory someone at John Lewis could be proxying the Verified By Visa content and sniffing my results, but that's why I said "I'm happily shopping at some site that I trust" - I trust John Lewis not to do that. And the URL for Verified By Visa is for some address that you've never heard of anyway, so seeing it actually *reduces* your trust.
RichieHindle
+1  A: 

iframes have access to certain properties of the parent document, e.g. redirect the parent frame to a new location using parent.location.href or parent.window.location (IE allows to restrict that).

This is great for phishing attacks when embedding content from other servers (even if you trust that server it might be compromised).

iframes can also be used for a variety of other attacks: IFrames security summary.

0xA3
A: 

With HTML 5 you'll be able to use the cross document messaging API to send messages from window to window, but for now the iFrame is the most viable alternative to any sort of AJAX that requires styling and scripting to load with the data.

If you're looking to just use text data in the iFrame, use AJAX instead. If you want external CSS or JavaScript to work in a protected environment, want styling to start from scratch, or need to access cross domain documents, use the iFrame.

Cons are that the accessibility of iFrames generally sucks, although you can prevent this by making sure that you proceed the iFrame with a notice of external content for screenreaders. Also check the HTML specifications for other ways to make the iFrame more accessible. Other than that and the obvious limitations scripting wise, the iFrame is a great tool is used responsibly and sparsely.

One last note, piling a page full of iFrames is definitely not a good idea, as remember that for each loaded iFrame, a DOM is created, HTML requests are made and document wrappers are instantiated, eating memory and bandwidth in the process. Keep iFrame's to a minimum on the page, and you'll avoid misuing a powerful tool in the HTML aresenal.

Nathan Kleyn
+1  A: 

IFrames are a great way to "include" external content in a web page. However, there are a couple of (small) drawbacks:

  • Security sandboxing will cause problems with JavaScript if the IFrame does not originate from the same domain.
  • You cannot get CSS to co-operate between the IFrame and the parent page, unless you control the stylesheets themselves.
  • From an indexing point of view, the IFrame's content doesn't exist.
  • Screen readers might not like the IFrame, for the same reason. Or they won't be able to properly indicate the relative meaning of an IFrame's contents.

Apart from that, they're great! The points I mentioned might even be considered advantages, if you think about it (except the screen reader one): in principle, an IFrame can't influence its parent page's layout, and it isn't influenced itself by its parent either.

Ruben
A: 

Pros:

  • Helps with slow third-party content like badges and ads
  • Security sandbox
  • Download scripts in parallel

Cons:

  • Costly even if blank
  • Blocks page onload
  • Non-semantic

Source: Best Practices for Speeding Up Your Web Site

Ronnie
A: 

As a general rule, iframes are a bad experience for SEO reasons. So, you ask is there any reason not to use iframes? Yes, if you use iframes you are losing some organic placement in the search engines.

Of course, there are usability concerns which can (and should) trump SEO value of pages.

marcc