Revision 907997 of Working with iframes

Revision slug: Tools/Working_with_iframes
Revision title: Hello World
Revision id: 907997
Created: Aug 29, 2015, 8:20:58 PM
Creator: growssbill
Is current revision? No
Comment

Tags:

Revision Content

Introduction:

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="https://mrbool.com" body bgcolor="#ffffcc">
<FRAME SRC="https://mrbool.com">
<FRAME SRC="https://mrbool.com">
<FRAME SRC="https://mrbool.com">
</FRAMESET>
</HTML>

Above figure is output of simple frames in which four others frames are displaying in single window all sub window are resizable

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.

IFrame:

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="https://mrbool.com" width="400px" height="150px" scrolling="YES"; bgcolor="#C9D3DE">
</iframe>
<iframe frameborder="1"src="https://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>

Revision Source

<div class="geckoVersionNote">
<p>Introduction:</p>

<p>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.</p>

<p>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 &lt;FRAMESET&gt; tag. Script and output figure will clear the concept:</p>

<p><strong>Listing 1:</strong>&nbsp;Script of frames in a HTML Page</p>

<pre>
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt; Example of Frames&lt;/TITLE&gt;
&lt;/HEAD&gt;
&lt;FRAMESET ROWS="50%, *" COLS="*, 50%"&gt;
&lt;FRAME SRC="https://mrbool.com" body bgcolor="#ffffcc"&gt;
&lt;FRAME SRC="https://mrbool.com"&gt;
&lt;FRAME SRC="https://mrbool.com"&gt;
&lt;FRAME SRC="https://mrbool.com"&gt;
&lt;/FRAMESET&gt;
&lt;/HTML&gt; 

</pre>

<p><img alt="Above figure is output of simple frames in which four others frames are displaying in single window all sub window are resizable" src="https://videos.web-03.net/mrbool/articles/PriteeChaurasia/IFrameTutorial/IframeTutorial01.jpg" /></p>

<p><strong>Figure 1:</strong>&nbsp;Above figure is output of simple frames in which four others frames are displaying in single window all sub window are resizable.</p>

<p>&lt;FRAMESET&gt; creates a sections of document in which each section (separate document) called frame. In its simplest use, &lt;FRAMESET&gt; 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.</p>

<p>The main attributes of &lt;frame&gt; 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.</p>

<h3 id="IFrame">IFrame:</h3>

<p>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.</p>

<p>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.</p>

<p>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.</p>

<p>Listed example will clear the concept of &lt;frame&gt;:</p>

<p><strong>Listing 2:</strong>&nbsp;Script of Iframe</p>

<pre>
&lt;!Doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Iframe Example &lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;iframe frameborder="1" src="https://mrbool.com" width="400px" height="150px" scrolling="YES"; bgcolor="#C9D3DE"&gt;
&lt;/iframe&gt;
&lt;iframe frameborder="1"src="https://agsttl.com/data/document/AGSBLU.pdf" width="400px" height="150px" scrolling="no"; bgcolor="#C9D3DE"&gt;
&lt;/iframe&gt;
&lt;iframe frameborder="1"src="Sample PDF.pdf" width="400px" height="150px" scrolling="no"; bgcolor="#C9D3DE"&gt;
&lt;/iframe&gt;
&lt;iframe frameborder="1"src="Sample Doc.docx" width="200px" height="100px" scrolling="yes"; bgcolor="#C9D3DE"&gt;
&lt;/iframe&gt;
&lt;h5&gt; 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.&lt;/h5&gt;
&lt;/body&gt;
&lt;/html&gt;
 </pre>

<p><br />
 <br />
 Read more:&nbsp;<a href="https://mrbool.com/how-to-work-with-iframes-in-html/26110#ixzz3kGBLc0zy">https://mrbool.com/how-to-work-with-iframes-in-html/26110#ixzz3kGBLc0zy</a></p>
</div>

Revert to this revision