Displaying Alternate Page Area in an IFRAME
An IFRAME is a rectangular area on a web page that displays
the contents of an external web page.
The rectangular area's size and the URL of the external web
page's URL are determined by the HTML code used for the main
web page.
Below is example code for an IFRAME 300 pixels wide and 200
pixels high that displays the external web page at URL
http://example.com/PageForIFRAME.html
<iframe
name="MyIFRAME"
src="http://example.com/PageForIFRAME.html"
width="300"
height="200"
frameborder="0"
scrolling="no"
marginwidth="0"
marginheight="0">
</iframe>
Put the above code into one of your web pages, changing
the value of the SRC attribute to contain the URL of a
web page of your choice, then load the web page into your
browser. You'll see how it works.
The web page at http://www.w3schools.com/tags/tag_iframe.asp
has more information about the IFRAME tag and attributes.
When the external web page is larger than the rectangular
area of the IFRAME, the top-left portion of the external
web page is displayed by default.
Some situations can require a different portion of the
external web page be displayed in the IFRAME. JavaScript
can help with that, scrolling the web page in the IFRAME
to the required location.
Note that this works with web pages of the same domain
(provided no other JavaScript in those pages interfere).
The automatic scrolling is unlikely to work when a web
page of another domain is loaded into the IFRAME.
Here are a few examples of situations that may require
displaying a different area:
-
The "thank you" page of a quiz is scrolled to bypass
the header and navigation area, presenting only the
scores.
-
The area to be displayed in the IFRAME depends on
the browser being used.
-
Only one area of a "specials" page is to be presented
in the IFRAME.
To see how it works, put this JavaScript on the web page
that contains the IFRAME code presented above. The external
web page contained in the IFRAME will automatically scroll
to display a different area. The scroll is 200 pixels in
from the left and 100 pixels down from the top.
<script type="text/javascript" language="JavaScript">
<!-- Copyright 2005 Bontrager Connection, LLC
function ScrollToAnArea() {
var InFromLeft = 200;
var DownFromTop = 100;
window.MyIFRAME.scrollTo(InFromLeft,DownFromTop);
}
window.onload = ScrollToAnArea;
//-->
</script>
To change the area for display in the IFRAME, change the
number of pixels specified for variables InFromLeft and
DownFromTop.
If you're proficient with JavaScript, the area to be
displayed could be determined by the day of the week, the
content of a cookie, the browser or operating system being
used, as examples.
Will Bontrager
©2005 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
