What is the difference between Frame and IFrame in HTML ?
Asked by
Ranimi23 (
1917)
September 13th, 2010
I once was asked this and I didn’t know the right answer. Any one can give it to me in short sentence
Observing members:
0
Composing members:
0
12 Answers
Frames are just separated spaces on a single web page.
Iframes (in-line frame) are separate spaces where each frame is a different web page.
Hmm… I can link to other pages in Frames?
the same as in IFrame?
@Ranimi23 You can link to another page in a frame, but it will be displayed without the parent frame unless the target attribute is declared in the a tag.
Are you wanting to link to a page on your website and insert it into a frame without reloading the whole page around it, or do you need to link to a specific page on another site which is embedded in a frame?
@Vortico , I just looking for a way to explain the difference the right way to someone who learns HTML. I was having trouble once to answer this question someone asked me.
If I understand this: The Frame and IFrame can link/show another web page.
Onle IFrame can show one PART of another page, while Frame is loading the ALL web page I link to ?
Each frame
and iframe
specifies a unique url… the content of each is its own web page.
Frameset
‘s are used to define the layout, size, placement, and url for each frame
whereas an iframe
can be defined inline a normal html document’s body.
—
As a general rule, avoid the use of frame
and iframe
as they aren’t as universally supported on all browsers (especially mobile) as you might like; they can break traditional browser navigation cues; are difficult to bookmark; and can be confusing to users if they’re used to display content from a third-part site.
@Ranimi23, no, that’s not it.
Whether it’s frame
or iframe
doesn’t matter, they’re both like a window showing the contents of whatever url you point them to. It’s just that you can control the size of that window. If the window is smaller than the content, then the user will only see a portion. As the author of the frame
‘s html, you can control whether scrollbars are provided for the user to move around and see more of that content.
Ah! I read that in your original question, and it didn’t even register!
In that case, a Frame is an HTML page with no content whatsoever which defines other HTML pages to load in a specific layout. Some pseudocode of a Frame would look similar to this: (~ is used for indention)
<html>
. . .
<frameset cols=“100px, 25%, *”>
~ <frame src=“page1.html” name=“frame1” />
~ <frame src=“page2.html” />
~ <frame src=“page3.html” />
</frameset>
</html>
An IFrame enables an HTML page to be embedded inside another page alongside content. For example:
<html>
. . .
<p>Content content content content content.<p>
<iframe src=“page1.html” width=“200px” height=“150px”>
<p>Content content content content content.<p>
</html>
You asked if you can link to a page from another page in the frameset. Yes you can.
<a href=“page4.html” target=“frame1”>
@Ranimi23 said it. Unless you’re still living in the nineties, avoid frames altogether. I’ve only seen a couple worthy uses of an IFrame, and unless you know exactly what you’re doing, you’re more than likely to have no reason to use them. For web development that requires a consistent theme across a site, use server-side languages such as PHP, ASP, Java, Django/Python.
@Vortico I’m curious as to what those worthy uses are :)
@Vincentt I can think of two.
Facebook offers a few social plugins for web developers to add to their sites. Since these plugins rely on a user to be logged into Facebook, the Javascript needs to be able to read session cookies with log-in data. A cross-site script could theoretically be used, but it would be way too much trouble for what it’s worth. Thus, they offer a simple IFrame element which loads a small page hosted by Facebook.
Though I can’t give you a link, the StumbleUpon toolbar for Safari is actually a page with an IFrame. Above the frame containing the actual main page content is the content of the toolbar (Stumble button, thumbs-up button, etc.) Since Safari does not support plugins with bulky toolbars, StumbleUpon built the page with an IFrame as a substitute.
Safari probably does support toolbars with its recent plugin development additions, but bulky toolbars are frowned upon by Apple and its “followers”, as it clutters the screen.
Ah, yes, the website-provided toolbars (or toolbars for Safari), like isitfunnytoday.com’s, that is useful indeed. And a frame for Facebook is much better in terms of security as well.
However, how is a frame toolbar better/less bulky than a native one? :P
Answer this question
This question is in the General Section. Responses must be helpful and on-topic.