The tutorial will deal with multiple .html documents into one browser window at a time. Tutorial will also cover a special frame tag called “Iframe” in which you will learn how to display a web page within a web page.
Frames allow us to place multiple .html documents inside one browser window at a time. This gives developer a chance to keep certain information visible, scrolled or replaced while multiple page loads on single window. For example, within the same window, one frame might display a static banner, a second a horizontal menu, third a vertical flash navigation menu and a fourth the main document that can be scrolled through or replaced by navigating in the second frame.
Listed example will demonstrate four frames inside single window. Actually four different frame are four individual web pages. Frames are defined inside of <FRAMESET> tag. Script and output figure will clear the concept:
Listing 1: Script of frames in a HTML Page
<HTML> <HEAD> <TITLE> Example of Frames</TITLE> </HEAD> <FRAMESET ROWS="50%, *" COLS="*, 50%"> <FRAME SRC="http://mrbool.com" body bgcolor="#ffffcc"> <FRAME SRC="http://mrbool.com"> <FRAME SRC="http://mrbool.com"> <FRAME SRC="http://mrbool.com"> </FRAMESET> </HTML>
Figure 1: Above figure is output of simple frames in which four others frames are displaying in single window all sub window are resizable.
<FRAMESET> creates a sections of document in which each section (separate document) called frame. In its simplest use, <FRAMESET> defines how many columns and/or rows will be there in the "table". You must use either the COLS or the ROWS attributes or both.
The main attributes of <frame> are Name, scrolling, and noresize. When we apply name attribute to the frame, name=" ", then the frame is used as a target and can be left if the frame is not to be targeted. Scrolling, hscrolling, and vscrolling can be set to yes/no/auto to control the appearance of the frame's scroll bars. hscrolling and vscrolling controls the horizontal and vertical bars independently. "auto" is a nice setting because it lets the browser display scroll bars only when necessary. Developers may restrict browsers from changing frame size by adding noresize.
Frame ideas can be implanted in form of Inline Frames(Iframe),that allows you to open new pages inside main pages, Inline or “floating” frames are ones which appear on a page, much like an image or a table. This helps developers to open completely separate pages in the middle of your pages. Although Iframe can be placed anywhere in the document making it very flexible to use, HTML Iframe is useful when developers want to include one web page or document inside the current HTML document.
Suppose developers want to display any PDF document or docx file inside your web page, then they definitely need to use Iframe. One can also add a web page with Iframe for a quick preview in the current HTML page. One more use of an Iframe is when one wants to load content from another web site and make the content appear integrated with his or her own web site. It may also be used for the purposes of dynamically changing the content on a defined part of the page such as advertisement block of flight updating page.
Using Iframe is simple, 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.
Listed example will clear the concept of <frame>:
Listing 2: Script of Iframe
<!Doctype html> <html> <head> <title>Iframe Example </title> </head> <body> <iframe frameborder="1" src="http://mrbool.com" width="400px" height="150px" scrolling="YES"; bgcolor="#C9D3DE"> </iframe> <iframe frameborder="1"src="http://agsttl.com/data/document/AGSBLU.pdf" width="400px" height="150px" scrolling="no"; bgcolor="#C9D3DE"> </iframe> <iframe frameborder="1"src="Sample PDF.pdf" width="400px" height="150px" scrolling="no"; bgcolor="#C9D3DE"> </iframe> <iframe frameborder="1"src="Sample Doc.docx" width="200px" height="100px" scrolling="yes"; bgcolor="#C9D3DE"> </iframe> <h5> These are the four windows inside main page. First is webpage, Second is link of PDF, third one is attached pdf document and fourth one is attached document of docx file.</h5> </body> </html>
Figure 2: Above figure is output of Iframe tag
In the above example four different windows have been added in a single window in which first window is a web page, second is the pdf link, third is a pdf document and forth is a .docx file is attached that automatically gets downloaded as the page is opened.
These are the various attribute which fall under Iframe tag:
- HTML <frame> tag - container for resource
- HTML <frame> frameborder attribute - hides the iframe borders
- HTML <frame> scrolling attribute - hides the scrollbars
- HTML <frame> width attribute - sets horizontal size in pixels
- HTML <frame> height attribute - sets the vertical size in pixels
- HTML <frame> src attribute - specifies the URL of the initial image
- HTML <frame> name attribute - sets the name of the iframe
- HTML <frame> id attribute - set the name of the iframe
- HTML <a> tag - links to the images
- HTML <a> href attribute - specifies the URL of the image to display
- HTML <a> target attribute - specifies the name of the iframe
Targeting links in HTML Iframes
This section will give an introduction of targeting links in HTML Iframes that means opening a link of one iframe in another iframe on the same page. If you have two iframes on one page, you can open files in a second iframe from the first. For example, one iframe could be a contents page and the pages in the contents will load into the second iframe.
When developers want to create a document to inside an IFRAME, any links in that frame will automatically open in that same frame. But with the target attribute on the link developers decide where links should open. One can give a unique name with an id attribute to iframes and then point links at that frame with the ID as the value of the target attribute.
If one adds a target to an ID that does not exist in the current browser session; this will open the link in a new browser window, with that name. After the first time, any links that point to that named target will open in the same new window. But if one does not name every window or every frame with an ID, one can still target some specific windows without needing a named window or frame. These are called the standard targets.
There are five standard targets attribute:
- _blank: Loads the page into a new browser window.
- _self: Loads the page into the current window.
- _parent: Loads the page into the frame that is superior to the frame the hyperlink is in.
- _top: Cancels all frames, and loads in full browser window.
- "name": You can also use any name for a target and it will load a page into a new window. EXAMPLE: target="newwindow"
Listed example will cover the whole theory of targeting links in HTML iframe.
Listing 3:Script to Targeting Links in Iframe
<!DOCTYPE html> <html> <head> <title>Target Links in IFrame</title> </head> <body> <iframe src="http://mrbool.com/" name="Mrbool1" width="600px"> </iframe> <p><a href="http://mrbool.com/portal/contact.asp" target="_top"> Mrbool Contact Page. </a></p> <iframe src="http://mrbool.com/" name="Mrbool2" width="600px"></iframe> <p><a href="http://mrbool.com/join/" target="Mrbool2"> Mrbool signup </a></p> <h4>This output describe two things when target is "_top" link will open in same full screen window if target will get same name with frame link will open in same frame</h4> </body> </html>
Figure 3: Above figure is output of script of targeting link in Iframe tag.
Please note that major attribute of frame are not supported by HTML five and few other browser like IE6.Conclusion
I covered the understanding and different scenarios of iframe, Go through with all details and apply the concepts in your web page. Please post your questions at mrbool site and will get back to you ASAP.