jump to navigation

IFrames what are they how to use them in Flex3 July 24, 2010

Posted by Tournas Dimitrios in Flex.

In this article, we will look at inline frames, otherwise known as iframes. Our discussion will include the syntax of iframes, possible uses , the essential issue of browser support and finally an example how to apply iframes in Flex3. Let’s first talk about what iframes are.

To understand an iframe, it is usually helpful to contrast it to the generic HTML frame. HTML frames divide the page into separate sections, all populated from different physical pages displayed at once. Users can scroll down one page while keeping another page static, all on the same screen. HTML frames are supported in almost all current browser versions.

In contrast, an inline frame is still a frame, but it appears in the middle of a page. Think of it as a little window on your page, where data from an entirely separate document is displayed. The iframe works independently from the page that displays it. Users can scroll within iframes and link to documents from within them, just like generic HTML frames. Users can not, however, resize the iframe.

Iframes support more than simple HTML documents. Users can display everything from HTML, to text documents and even Adobe Acrobat files within the iframe element.

Inline frame syntax
The iframe takes some of the same attributes that any other HTML element takes, like width, height, src and align. Taking our above iframe as our example, here’s the code required to pull that off.

 <iframe src="url/to/document.html" width="100%">
 Sorry, your browser does not support iframes; try a browser that supports W3 standards.

The inline frame syntax starts by identifying the name of the element, or ‘iframe’. Then, we specify the source file that will be displayed (embedded) within the iframe. I’ve set the width to 100%, which will span 100% of the main table in this case. The ‘Sorry, your browser does not support iframes.’ text will only display if the browser does not support the iframe element. Then, we simply end our iframe tag set.

While we are looking at the syntax, let’s take a look at some of the other attributes that the iframe element supports.

  • Name: names the iframe element
  • Src: location of source document
  • Longdesc: long description of content
  • Height/Width: sets dimensions of element
  • Frameborder: sets iframe border (0 or 1)
  • Align: top, bottom, middle, right and left
  • Marginwidth: padding within iframe (left, right)
  • Marginheight: padding within iframe (top, bottom)
  • Scrolling: takes values of yes, no or auto

The syntax of the iframe is very straight forward. Although you don’t have to specify all of these, you must use the ‘src’ attribute so the iframe knows which document to include. Alignment, unless otherwise stated, defaults to left and scrolling defaults to auto. Frameborder defaults to 1 and marginwidth/marginheight defaults to about 5 each. The ‘Longdesc’ attribute is a decent supplement to the Title tag, which offers visually impaired users a description of the content.

So, if I want to design an iframe with the name “MyIframe”, 100% width, aligned in the center and with both marginwidth and marginheight set to 10, here’s what the code looks like:

<iframe src="url/to/document.html" width="100%" align="center" marginheight="10" marginwidth="10" name="MyIframe">
 Sorry, your browser does not support iframes; try a browser that supports W3 standards.

Now that we know what an inline frame is, what it looks like and how to code it, which browsers support this element? We’ll examine it below.
Browser support for iframes :

  • IE: IE appears to support the iframe since version 4 (Mac since version 3)
  • Netscape: version 6 and later
  • Opera: the 4.02 beta is said to support iframes (Mac and Unix since version 5; BeOS since version 3.62)
  • Mozilla: since version 1
  • Bezilla: since version 1
  • Galleon: since version 1.2
  • WarpZilla: since version 1
  • Lynx: support since 2.8.2

Where should iframes be used? :
Iframes are especially useful for displaying larger amounts of information in a small space. Because iframe elements support scrolling, the user can view many pages of information without having to scroll the main page at all. Because iframes support the same HTML as any other document, including images, links and CSS styles, users can unleash the power of iframes and create an extremely efficient display of information.

Links clicked within the iframe element will change the iframe page, NOT the main page. To change the main page from a link within the iframe element, use target=”_parent” in the embedded iframe page.

You should now be able to design an iframe, link it to the appropriate file and set their attributes accordingly. Be sure your target audience supports the iframe element by a large majority and have fun. They can become beneficial design elements if used appropriately.

IFrames in Flex3 :

After googling I found a AC3 class that implements IFrames in Flex .See the picture below

The IFrame component was developed originally I believe by Christophe Conraets and then subsequently improved by Brian Deitte.If you just want to get the code and skip my ramblings go here. Right click to examine the source or download the code from here


No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s