HTML Iframes, or inline frames, are used to load two or more html files in any web
page. Iframe is displayed and placed more like a standard 'div' element. That is
why it can be placed anywhere in the document. This makes iframe very handy and
flexible to use. HTML iframe is useful when you want to include one web page or
document inside your parent HTML document.
A typical example of using HTML iframe will be to include the preview of a PDF file
inside your web page. Here, you can provide a separate icon for downloading the
file. If you don't use iframe, it will be really difficult to code to get a partial
preview of PDF file. You may also like to add a web page with iframe for a quick
preview in the current HTML page.
Another typical usage for an iframe is where you want to load content from another
web site and make the content appear integrated with your own web site. It may also
be used for the purposes of dynamically changing the content on a defined part of
the page.
Earlier, in a frameset (which is depreciated now), the individual windows can only
be laid in rows or columns, However, iframe provides a window that can be placed
anywhere within an existing, non frame-based page, much as you could place a table
or an image.
However, some of the older browsers do not support iframes, but we can always leave
an alternate message in these browsers.
<iframe> Tag
Using iframe is simple. Just as img tag, minimum requirement for iframe is 'src'
attribute which, for iframes, specifies the address of the document. With 'width'
and 'height' attributes, you can specify the width and height of the iframe.
You can put the following code anywhere inside the <body> tags in any of your
web pages.
Output
Other important attributes are 'id', 'frameborder', 'scrolling', 'marginheight'
and 'marginwidth'. For not displaying the border around iframe, put value as 0
for 'frameborder'. If you don't want your users to scroll the page inside iframe,
put no for 'scrolling' attribute. For defining the margins, put marginheight
and marginwidth values in pixels. For the browsers, which do not support iframes,
you may place some comment with a link inside iframe tags.
Let's change our code to test it.
Output
Have fun with iframe!
The page inside the iframe loads independently (without loading the parent web page).
If you change the source of iframe, it would look as if some good programming (like
AJAX) is behind that. Doing this is pretty easy and fun. All you need to do is to
add a hyperlink (<a> tag) with target attribute as the id of iframe. Don't
forget to remove the border and scrolling for better effect: Here is an example.
Click for: Google | Webtutorialplus
Liked it? Here is the html code for this example:
Tutorial on HTML - Tips
Hackers and malicious program distributors have been using iframes as a favorite
tool for sending virus and malicious programs through their web pages. But don't
worry; any good anti-virus software can easily detect all of these. Just make sure
you are using one while surfing internet!