///Displaying Alternate Page Area in an IFRAME

Displaying Alternate Page Area in an IFRAME

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

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.

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.

2010-05-26T11:30:50+00:00 April 21st, 2005|JavaScript|0 Comments

About the Author:

Leave A Comment