Is <iframe> bad practice? [duplicate] - html

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Are iframes considered 'bad practice'?
As far as practicality of application and what is considered "good" or "proper" practice in modern web development, is using the <iframe> tag considered "acceptable"?
I'm aware that HTML5 has implemented some new attributes for this tag, but IIRC, <iframe> has gotten some bad rep in the past.
Is this something that should be handled case-by-case, or is it best to try and avoid the usage of this tag despite HTML5s new support for it?

Yeah, this is one of those cases where it's not a "yes or no" type answer. Nowadays there is a lot you can accomplish using AJAX to load HTML from the server and have it populate a div for you - heck jquery's even got it built into their AJAX functions.
I normally try to figure out if that's a good solution for the problem before resorting to iframes. Sometimes, however, an iframe just does the job better. It maintains its own browser history, helps you segregate CSS styles if that's an issue with the content you're loading in.
I like j08691's comment that it's a "necessary evil" sometimes, but don't let that stop you from using it when the AJAX/Div solution just gets too damn ugly or requires too many hacks to get working.

Related

Frames in HTML5 [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
My girlfriend is making a website for her exam.
She is not good at HTML - at all! (Me neither). But for making it easy for her, I told her to use frames. It's easy and manageable.
But the problem is that the website have to live up to the standard HMTL5. That's a requirement. I don't think frames does that because it's deprecated. Am I right or wrong?
So.. What to do? It has to be as simple as possible. I don't think the other solutions I could find are something she can do herself :( Any ideas?
(Sorry, if my english sucks :) )
You should definitely try not to use deprecated elements. They will behave inconsistently, and probably won't work in the future. There's also a very good reason why frames are deprecated.
You probably need to rethink how you're structuring your data. An HTML page should be as simple and to-the-point as possible. If you have to pull in a significant amount of content from other web-pages using frames, you're doing it wrong. In most cases it's better to simply link to the extra content.
If you're trying to use frames to pull in the <header> or the <nav>, so you don't have to simply copy them across multiple pages, although I applaud you for trying to be DRY, this is the wrong way to do it. Just copying these sections into all your documents is a better solution than using frames.
Ideally though, you'd use a server-side templating system of some sort. The simplest one (depending on your setup) may be Server-Side Includes.
Having said all that, if you really need frames, the <iframe> element is perfectly valid in HTML5 and may help you out.
Don't use frames, very old and not needed at all
Make sure all your style stuff is made in CSS and it's loaded through a CSS file.
Then make each html page with the information needed in it. Use links for navigation to another page.
With the external CSS you can change the look of your site in one file (the CSS file), and it will automatic update for each html page.
You are correct in assuming that frames do not conform to the HTML5 draft (to the extent that it makes sense to speak of conformance to a draft). HTML5 is not a standard, though it may one day become W3C Recommendation. It does not use the term “deprecated” but “obsolete” and “non-conforming”, but in any case, frameset and frame elements do not conform.
The iframe element (“inline frame”) conforms, however. Using it instead of “normal” (old-style) frames is clumsy and limited, but possible to some extent.
I think this answers the specific, on-topic questions asked. The rest is mainly opinion-based and hence off-topic at SO.
P.S. If “living up the the standard HTML5” is a requirement, then the teachers would need a crash course on the basics of HTML5 process. The requirement means that a page that is “standard HTML5” in the morning may become non-conforming before lunch. After all, HTML5 is a draft that may change at any moment without prior notice, and it says itself: “It is inappropriate to cite this document as other than work in progress.”

Should the IFrame be dead by now? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I was talking with a colleague about a problem we were having and he suggested that one possible solution was to use an IFrame.
I haven't needed to use an IFrame for he last 5 years and I've done full time web application development, but it made me wonder if the concept of the IFrame and Framesets is something that is supported by browsers for backwards compatibility but really shouldn't be actively used in development any more?
it's one of the major application integration methods for facebook and myspace. and most wysiwyg html editors rely on iframe. thickbox uses iframe. drupal uses iframes. and on and on... so not sure if it's so very simple to just call iframe obsolete. i imagine it'll be actively used for a good long while still...
It's the fastest and easiest way to get any of a number of google services into a web page, where the fuller control of the API integration is not needed.
Like anything else, it is situational. It's far from dead, and there's no reason it should be dead. The web's moving to looser coupling, and IFrame is in line with that.
At best the IFrame isn't ideal for rendering local content, but, like others have said, it is the only way to get external web-content into an application without an API and for that reason it is very important to modern web-development.
No, it shouldn't.
It's a cheap standard way to integrate functionality in a single page. Also allows some useful techniques such as COMET
Not sure if it should be dead. For one of the application I worked on for the manufacturing industry, they wanted multiple tabs to be able to run multiple programs on the same page. Knowing using just regular divs using Ajax would just be a little too much for this intensive app, we used iframes. Of course, it doesn't look like iframes to the end user (using some creative Javascripting and CSS), it looks like just a regular tabbed program.
So, saying it's dead is probably a little too soon unless there are better alternatives.
It's extensively used in ad tracking and conversion tracking; it's one of the easiest ways to put a beacon into a site unobtrusively.
I think that iFrames are not dead yet, they can be used for a lot of things and though they slow the loading speed of a website (with a few miliseconds, depends on the content).
iFrames maybe, Framesets NO. this is what i think. some things can be done only with iframes believe me i searched for another solution for a long time but for eg. a jscript can be used 2 or more times with iframes but when used on a single page it may cause conflicts and sometimes only the first thing that was using the javascript is working.
so sometimes iFrames are the right way to do it, if you can`t do it any other way.
No, its commonly used in junction with AJAX.
For example, on a page where you have ongoing AJAX requests you can't disrupt the response by closing it etc. BUT, you may need to provide a file download on the same page which would normally disrupt the AJAX request. To avoid the conflict, you serve the file download through an IFrame so that the AJAX on the host page isn't disrupted.
That's at least one use case for it =)
Iframes are not dead. They are the only method of fighting several extremely annoying bugs in MSIE (such as div overlapping a <select>), and are widely used in banner exchange networks.
If you consider the fundamental building blocks of the web you will realise that the iframe should never be removed. I have the feeling that many web developers do not properly understand the concepts of data centric systems and prefer to work in a procedural, top-down, application centric manner. There are many things done with async HTTP requests and Javascript that should simply use an iframe.
There are two fundamental concepts when it comes to linking content in a data centric world like the web - cross referencing and embedding. Hyperlinks are used to cross reference data while iframes are used to embed data. URLs are used to reference data in both cases.
A simple example is linking to an image. Cross referencing an image would be done as follows:
Link to the image
While embedding an image would be achieved as follows:
<iframe src="someImageURL" />
Of course you could use the "img" element to embed an image instead, but that is specific to images... I vote that the "img" element be removed in favor of using the more generic and flexible iframe.

Why does the Google homepage use deprecated HTML (ie. is not valid HTML5)?

I was looking at the www.google.com in Firebug and noticed something odd: The Google logo is centered using a center tag.
So I went and checked the page with the W3C validator and it found 48 errors. Now, I know there are times when you can't make a page valid, especially when we're talking about something like www.google.com and you want it to be as small as possible, but can someone please explain why they use the center tag?
I attended a panel at SXSW a few years ago called "F*ck Standards" which was all about breaking from standards when it makes sense. There was a Google engineer on the panel who talked about the Google home page failing validation, using deprecated tags, etc. He said it was all about performance. He specifically mentioned layout rendering with tables beating divs and CSS in this case. As long as the page worked for their users, they favored performance over standards.
This is a very simple page with high traffic so it makes sense. I imagine if you're building a complex app that this approach might not scale well.
From the horse's mouth.
Because it's just the easiest, most concise way to get the job done. <center> is deprecated, for sure, but as long as it's still supported, you're likely to still see them using it.
Shorter than margin:0 auto. Quicker to parse. It is valid HTML4. No external dependencies, so less HTTP requests.
Usability is NOT validity.
Google Search's biggest achievement has been to build a site which is easy to use, and can be widely used. Now, if Google achieved this with a page which does not validate, well, there's a lesson there to learn.
I think a better question to ask would be "why would Google make it validate if it works fine?" It makes no difference to the user.
There has been speculation and discussion about whether this is intentional; the basic test carried out in the first link does result in a smaller page, and even gzipped, through millions of page views it theoretically stacks up. I doubt that's the reason though: it was created, tested on many browsers at the time, it worked, and continues to work.
Google's breaks validation in many ways on their home page. The very likely real reason - they are all about speed and bandwidth costs. Look at the size of the home page HTML particularly after Gzip is applied at the packet level. They are clearly trying to avoid packet fragmentation (which will mean more bandwidth) and willing to do whatever it takes to get it (identifier shortening, quote removal, deprecated tags, white space removal, etc.
If you look at this just as a validity question, fine but they break the rules on purpose if you don't assume this of course you may jump to a negative conclusion. BTW you can further optimize their pages both in positive and negative manners but why once inside the typical packet size it is somewhat pointless.
They also use other deprecated presentational tags like font and u. My guess is it makes the page quicker to load then using an external stylesheet and allows it to work on more platforms.
It's deprecated, sure, but I think simplicity is the answer to your question.

Are IFrames (HTML) obsolete? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
Getting contradictory messages about that, hope they're not.
I cannot imagine support for it would stop, since a gazillion sites use them.
Some additional questions about that:
Why should they phase out this tag?
Any alternative for it?
Support for <iframe> is still there in HTML 5, so I don't think this will change in the near future.
To answer your other questions:
<iframe>s (as frames in general) are most of the time not user-friendly:
They don't allow easy access of the content in the frame via an URL (without losing the content outside of the frame at least).
Most "technophobe" users are irritated by frames.
As far as I know they are slower to render for browsers
Alternatives include dynamic page generation (SSI, PHP, Rails and so on) and using JavaScript / AJAX to change contents of e.g. a <div>
To be clear: I'm talking about <iframe> as an interface element. Not a hidden element for loading other stuff like e.g. Google Mail does.
In my opinion the W3C jumped the gun in dumping iframes from the Strict HTML and XHTML doctypes. In theory you would use the <object> element to add foreign objects to your document, but browser differences and limitations have made this a nonstarter for many developers. With the much-more-pragmatic HTML 5 (which is still a draft), iframes are back and even have two new attributes: seamless, and the intriguing sandbox.
IFrames are not obsolete, but the reasons for using them are rare.
Using IFrames to serve your own content creates a "wall" around accessing the content in that area.
For crawlers like Google, It's not immediately clear that cotent in an iframe will be ranked as highly as if the content were simply part of the page. For many, this is reason enough not to use it.
It makes the DOM for the IFrame less accessible by tools like jQuery, prototype etc..
Reasons for using iframes:
It's great for walling off other people's stuff from other domains but it doesn't integrate smoothly. (stylesheets, javascript etc...)
Integrating multimedia can sometimes be done easier via an iframe as opposed to using the embed tag.
Really, really specialized cases like gmail's case where they are using it for sounds and history management.
I would also answer that there is no need for the removal of iframes, it's a needed tag and will be around for a while.
Iframes are obsolete for page layout. Never use them instead of good CSS layout, even table-based layout is better.
Good reasons for using iframes are:
ads: adwords for example uses this technique, it is good for encapsulating - ad css won't destroy your page.
hidden iframe: it can be used for hundreds usable things, like tracking, ajax-alternative, etc.
I've seen lots of forums that suggest the Object tag as a replacement for IFrame, which probably works in most cases.
For example, I had a PDF showing in an IFrame (because there were other things we need to show on the page besides only the PDF) and was able to get it to display fine using Object.
What was:
<iframe id="confirmed_pdf" class="current_pdf" src="/prescriptions/show_pdf?id=123" height="570" width="480"></iframe>
Became:
<object id="confirmed_pdf" class="current_pdf" data="/prescriptions/show_pdf?id=123" type="application/pdf" height="570" width="480">
<p>[Show this message if displaying the PDF did not work]</p>
</object>
But Object was not a suitable replacement to fill the requirement to be able to print ONLY the PDF portion of the page.
An IFrame is like its own window within the page (a window within a window, basically), and once you get the window object, you can call .print() on it, like:
jQuery("#confirmed_pdf").contentWindow.print();
IFrame has a contentWindow property, that's what makes printing only that part possible. Object does not have a contentWindow property, so there's no way to print only the section of the page.
So, it seems like if you're just using IFrame to display something, there's other tags like Object that can be used instead. But if you need to interact with the contents of the IFrame in certain ways, then IFrame may be necessary.
IFrames are used a lot with AJAX. GMail for example, uses nine hidden IFrames I believe.
IFrames are not dead, but Frameset/Frames are dying.
In the last 2 releases of IE (IE7/IE8) zooming in Frames (not IFrames) has created disastrous results.
By all means use IFrames, but IMHO stay clear of Framesets/Frames.
At my previous company, we provided a hosted application that customers would integrate into their own websites. At times, they would use an IFrame to do this, fitting our hosted page into their existing designs. Sometimes this was even done seamlessly (ie. the IFrame had no borders or scrollbars, it just looked like part of the page). I considered this to be a good use of the tag.
They can be extremely useful in some circumstances, but those are limited. In particular embedding common functionality across multiple sites.
For example I have a client who runs a number of Scottish goods e-commerce sites. As part of this we have developed a couple of simple applications to locate possible clan names from your surname or your choice of tartans (giggle if you wish but tartans are worth $700 million a year to our economy). The database behind this is surprisingly large (nearly ten thousand rows in the core names and tartans tables) and fairly regularly updated.
So we have the applications set up to run on one website and then embedded these into our other websites using an iframe, enabling simple javascript parameter passing so we can integrate the selection of a tartan or clan with functionality on the embedding site. The iframe is set as noborder so it appears completely seamless to the end user.
Of course there would be other ways of doing this, but the use of an iframe is simple and robust. And it's certainly not obsolete.
Horses for courses... <iframe>s are like anything else... for the right purpose they're the right tool; for the wrong purpose they're an ugly hack, or worse.
In Ajax, <div>s are often the more appropriate container. In some places the activity of passing-off external content as part of your own site, as supported by <iframe>s, is inappropriate.
My team used an <iframe> the other day as an ideal way to give users access to their HTML e-mail history - the e-mails were complete <html> pages which we wanted to insert easily into our web template. <iframe>s were absolutely perfect for presenting that data]'.
On the other hand, <iframe>s should almost always be removed or disabled in any user-submitted content which is output back onto the site, because in that context they are a major security issue.
The google gadget specification currently relies on iframes: http://code.google.com/apis/gadgets/docs/spec.html
Currently they are the only simple way to provide isolation for javascript apps that are pulled from multiple domains/providers.
Also many of the widgets that people embed on their websites from third-parties use iframes.
While they do have their drawbacks, iframes provide a pragmatic solution to common problems on the web. I'd have to guess that they will be around for some time to come.
Compliance and Security issues can also drive you to use Iframes; Shopping carts are popular IFrame-based implementations when you want to visually incorporate a shopping cart as part of some web pages without taking on full responsibility for the payment processing side of things.
We commonly deliver an Iframe to integrate our eCommerce stuff and clients like how turnkey it can be.
I work for a company that used frames for everything from pull down menus, lists, content blocks, etc just to cover the intricacies of .net web forms. The application is very slow and only runs on IE. Don't do this.

Are iframes considered 'bad practice'? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
The community reviewed whether to reopen this question 6 months ago and left it closed:
Original close reason(s) were not resolved
Improve this question
Somewhere along the line I picked up the notion that using iframes is 'bad practice'.
Is this true? What are the pros/cons of using them?
As with all technologies, it has its ups and downs. If you are using an iframe to get around a properly developed site, then of course it is bad practice. However sometimes an iframe is acceptable.
One of the main problems with an iframe has to do with bookmarks and navigation. If you are using it to simply embed a page inside your content, I think that is fine. That is what an iframe is for.
However I've seen iframes abused as well. It should never be used as an integral part of your site, but as a piece of content within a site.
Usually, if you can do it without an iframe, that is a better option. I'm sure others here may have more information or more specific examples, it all comes down to the problem you are trying to solve.
With that said, if you are limited to HTML and have no access to a backend like PHP or ASP.NET etc, sometimes an iframe is your only option.
They're not bad practice, they're just another tool and they add flexibility.
For use as a standard page element... they're good, because they're a simple and reliable way to separate content onto several pages. Especially for user-generated content, it may be useful to "sandbox" internal pages into an iframe so poor markup doesn't affect the main page. The downside is that if you introduce multiple layers of scrolling (one for the browser, one for the iframe) your users will get frustrated. Like adzm said, you don't want to use an iframe for primary navigation, but think about them as a text/markup equivalent to the way a video or another media file would be embedded.
For scripting background events, the choice is generally between a hidden iframe and XmlHttpRequest to load content for the current page. The difference there is that an iframe generates a page load, so you can move back and forward in browser cache with most browsers. Notice that Google, who uses XmlHttpRequest all over the place, also uses iframes in certain cases to allow a user to move back and forward in browser history.
It's 'bad practice' to use them without understanding their drawbacks. Adzm's post sums them up very well.
On the flipside, gmail makes heavy use of iFrames in the background for some of it's cooler features (like the automatic file upload). If you're aware of the limitations of iFrames I don't believe you should feel any compunction about using them.
Having worked with them in many circumstances, I've really come to think that iframe's are the web programming equivalent of the goto statement. That is, something to be generally avoided. Within a site they can be somewhat useful. However, cross-site, they are almost always a bad idea for anything but the simplest of content.
Consider the possibilities ... if used for parameterized content, they've created an interface. And in a professional site, that interface requires an SLA and version management - which are almost always ignored in rush to get online.
If used for active content - frames that host script - then there are the (different) cross domain script restrictions. Some can be hacked, but rarely consistently. And if your framed content has a need to be interactive, it will struggle to do so beyond the frame.
If used with licensed content, then the participating sites are burdened by the need to move entitlement information out of band between the hosts.
So, although, occaisionally useful within a site, they are rather unsuited to mashups. You're far better looking at real portals and portlets. Worse, they are a darling of every web amateur - many a tech manager has siezed on them as a solution to many problems. In fact, they create more.
Based on my experience a positive side for iframe are when calling third party codes, that may involve calling a javascript that calls a has a Document.write(); command. As you may know, these commands cannot be called asynchronously due to how it is parsed (DOM Parser etc). An example of this is http://sourceforge.net/projects/phpadsnew/ I've made use of iframes to help speed up our site as there were multiple calls to phpadsnews and the site was waiting for the response before proceeding to render different parts of the page. with an iframe I was able to allow the site to render other parts of the page and still call the Document.write() command of phpads asynchronously. Preventing and js locking.
There are definitely uses for iframes folks. How else would you put the weather networks widget on your page? The only other way is to grab their XML and parse it, but then of course you need conditions to throw up the pertenant weather graphics... not really worth it, but way cleaner if you have the time.
The original frameset model (Frameset and Frame-elements) were very bad from a usability standpoint. IFrame vas a later invention which didn't have as many problems as the original frameset model, but it does have its drawback.
If you allow the user to navigate inside the IFrame, then links and bookmarks will not work as expected (because you bookmark the URL of the outer page, but not the URL of the iframe).
It's worth noting that iframes will, regardless of the speed of your users' internet connection or the contents of the iframe, cause a small (0.3s or so) but noticeable slowdown in the speed your page downloads. This is not something you'll see when testing it locally. Actually, this is true for any element added to a page, but iframes seem to be worse.
When your main page loads in HTTP protocol and parts of your page need to work in HTTPS protocol, iFrame can beat jsonp hands down.
Especially, if your dataType is not natively json and needs to be translated on server into json and translated on client back into e.g. complex html.
So nope - iFrame is not evil.
They are not bad, but actually helpful. I had a huge problem some time ago where I had to embed my twitter feed and it just wouldn't let md do it on the same page, so I set it on a different page, and put it in as an iframe.
They are also good because all browsers (and phone browsers) support them. They can not be considered a bad practice, as long as you use them correctly.
I have seen IFRAMEs applied very successfully as an easy way to make dynamic context menus, but the target audience of that web-app was only Internet Explorer users.
I would say that it all depends on your requirements. If you wish to make sure your page works equally well on every browser, avoid IFRAMEs. If you are targeting a narrow and well-known audience (eg. on the local Intranet) and you see a benefit in using IFRAMEs then I would say it's OK to do so.