HTML: iframes
Iframes: is a flexible html solution for placing content into inline boxes within a single web page any where on that page. You use it to embed content from other html documents, or even display an entire page from another site.
It’s a pretty good solution to allow some interaction with the user, without having to reload the entire page. You could have a contact us form within an iframe, and only the section of the page will reload when submitted. You could use an iframe to load content that is scrollable, allowing the user’s page to sit static, while just that section of the page interacts with the user.
One major disadvantage of frames and iFrames is search engine indexing these pages. Search engines have a hard time corresponding the main concept of the web page to the documents or content within the frames or iframes.
There is one solution to help with the search engine indexing the main page with the frames or iframes. It is the use of NOFRAMES meta tag. However, not all search engines utilize meta tags in your main page. The NOFRAMES meta tag, allows you to place content between the two tags to help search engines and even older browsers that may have an issue with frames or iframes.
Sample Usage For iFrames
- Displaying an image when the user clicks a link on the main page. Only the iframe will reload with every click. I realize there is javascript all over the web that could do the same. However, an iFrame might be a quicker solution.
- Changing the content infromation within an iFrame when the user clicks a link. You could have a menu selection of links down the left side of a page, and allowing the user to click a link, again without the entire page reloading. The content from the link clicked would only change within the small window or iFrame.
- Hide the url from where the web page is actually pulling from. The user thinks they are going to www.yoursite.com, but it's actually an iFrame, pulling content from another site.
- Displaying content from a form submitted. You could build a single web page with an iFrame, basically splitting the page vertically down the middle. When the user submits a form on the left side of the page, it changes the content with the iFrame on the right side. Again, not reloading the entire page.
- A menu selection could be displayed across the top of the main web page with links to other content pages, allowing the user to click any of the links, displaying content in the main body of the web page, and not changing the menu selection across the top. This will allow you to make changes and/or additions to the menu selections on your site, and not have to change or modify all the content pages, that would normally have the menu selection on it.
- It allows your web page to be displayed within the browser window, without a lot of scrolling up and down by the user. Basically, you could build a web page with multiple iFrames, displaying content, allowing just those windows or iFrames to scroll, keeping your entire page within the users browser window.
Sample 1: Links to display an image
In this example, you would have some links on the main page, when clicked would change the image within the iFrame window.
<li><a href="/images/image2.gif" target="imgbox">Image 2</a> <li><a href="/images/image3.gif" target="imgbox">Image 3</a> <li><a href="/images/image4.gif" target="imgbox">Image 4</a> <iframe frameborder="0" scrolling="no" width="150" height="200" src="/images/default.gif" name="imgbox" id="imgbox"> </iframe>
Sample 2: Navigational Bar With Links
In this example, we will have a navigational menu across the top, with links to content pages within a single iFrame.
<table border=0 cellpadding=1 cellspacing=2 width=800> <tr> <td valign=top><a href="page1.html" target="mainframe">Page 1</a></td> <td valign=top><a href="page2.html" target="mainframe">Page 2</a></td> <td valign=top><a href="page3.html" target="mainframe">Page 3</a></td> <td valign=top><a href="page4.html" target="mainframe">Page 4</a></td></tr> </table> <br><br> <iframe name="mainframe" src="default_page.html" align="top" height="1000" width="480" hspace="0" vspace="0" frameborder="0" scrolling="auto"> </iframe>
CSS For iFrames
You can also change the look of the iFrame scrollbars and arrows with some css. Below is an example of some css that changes the look and feel of the iFrame scrollbars. Place this css within the page that is called within the iFrame. Insert the css code between the <head></head> tags.
<STYLE type="text/css">
BODY {
scrollbar-face-color: 3333cc;
scrollbar-base-color: 3333CC;
scrollbar-highlight-color: 000000;
scrollbar-3dlight-color: 000000;
scrollbar-darkshadow-color: 000000;
scrollbar-shadow-color: 000000;
scrollbar-arrow-color: FFFFFF;
scrollbar-track-color: ffffff; }
</STYLE>iFrame Properties
- SRC: URL of the document to go in the frame
- NAME: name of the frame
- LONGDESC: URL of a long description of the contents of the frame
- FRAMEBORDER: if the frame should have a border
- WIDTH: width of the frame
- HEIGHT: height of the frame
- MARGINWIDTH: internal left and right margin for the frame
- MARGINHEIGHT: internal top and bottom margin for the frame
- SCROLLING: if the iframe should have scroll bars
- ALIGN: alignment of the frame object to text around it
- VSPACE: space above and below the frame
- HSPACE: space to the left and right of the frame
Summary
In summary, iframes can help a great deal in the layout of your web page. I perfer iFrames than framesets. To me, it's much an easier set-up.
Check out my article on HTML Tables.
