Mywebdunia's Blog

Iframes allow you to load separate html files into an existing document. You can place iframes anywhere in the document and can use CSS and JavaScript to manipulate the properties of the iframe.

Example of iframe:

<iframe scrolling=”no” width=”500″ height=”300″ src=”iframe-sample.html” frameborder=”0″> </iframe>

Content of iframe-sample.html:
Say below is the content
<a href=”http://www.google.com&#8221; title=”Google” >Google</a>

The above example says the iframe will load a iframe-sample.html file withtin the specified width of 500px and height of 300px, ie,; you get google.com loaded within that specified width and height when you click on the link.

If you need the google.com page to be loaded into the same full page, then you need to add the target path to the anchor tag as parent, below is the code

<a href=”http://www.google.com&#8221; title=”Google” target=”_parent” >Google</a>

By writing _parent the page gets loaded into the parent of the iframe.

The iframe element is not valid in strict (X)HTML. Documents containing iframes will validate with transitional or frameset doctype declarations.

Some of the attributes supported by iframes are:

width: specifies the width of the iframe.

height: specifies the height of the iframe.

frameborder: specifies whether to display border or not (0,1) of the iframe.

name: specifies the name of an iframe.

scrolling: pecifies whether to display scrollbars or not.

marginheight: specifies top and bottom margins of the iframe.

marginwidth: specifies left and right margins of the iframe.

src: specifies the url of the document that to be loaded.

title: specifies the title of the iframe.

class: specifies the classname for an element.

id: specifies the id (unique id) for an element.

style: specifies inline style for an element.