The Ins and Outs of Iframes - Uses of iframes
(Page 3 of 4 )
The simplest use of an iframe is to merely display a static page located on the same server, for example:
<iframe src ="/path/mypage.html" width="100%"></iframe>
Not too exciting, right? Well, let's learn about some more interesting uses. To aid the discussion, we will talk about the web site of the fan club for the Webtown Wizards, my buddy Joe's favorite football club (it is imaginary, and so is Joe).
Joe is the webmaster of the Wizards Fans website, and he wanted to add something to make the blog page more interesting, so he added an iframe containing the home page of somesportsite.com (imaginary, I think). The somesportsite.com page had a score box so the fans could check out the score of the game while they write messages on the blog. The score box was the only area of the page that they were actually interested in.
<iframe src ="http://www.somesportsite.com" width="100%"></iframe>
This was a nice addition, but it was inconvenient to use. There was only room on the Wizards blog page for a 500px by 300px iframe, but somesportsite.com was a full-size web page. This meant that the iframe had scrollbars, and since the score box was located near the middle of the somesportsite.com page, a lot of scrolling was required to reach it. What Joe really wanted was to have only the score box from the somesportsite.com page display in the iframe. This is how he achieved it.
Displaying an Area of a Page in an iframe
The first thing Joe did was create a page called iframedemo.html. He then placed the iframe tag on the page. He made sure that it had a name attribute, knowing he would need it.
<iframe name="scorebox" src="http://dummypage.html" width="500" height="300" frameborder="0" scrolling="no" marginwidth="0" marginheight="0">
</iframe>
Making the iframe the same size as the score box (500 x 300), was easy using the width and height attributes. The problem Joe needed to overcome was that the iframe displayed the upper-left corner of the somesportsite.com page by default, but the score box was in the middle of the page. How could he move the area displayed by the iframe down to where the score box was?
What he did to solve this problem could more accurately be thought of as moving the somesportsite.com page underneath the area displayed in the iframe until the score box is visible.
Next: iframe Uses continued >>
More HTML Articles
More By John Best
