iFrame HTML is fairly straightforward. Below you will find a synopsis of the basic tags and attributes that you may use in your iframes. You can skip all of this and simply use our iframe generator - which also explains the utility of each of the options. The only thing we left out of our generator is style - if you are working with stylesheets, you probably know that a generator will not be much help there and would only probably further confuse you!

FAQ - Frequently Asked Questions

Q & A for basic iFrame HTML

iframe Browser Support

The <iframe> tag is supported in all major browsers.

internet explorer firefox google chrome safari opera amaya

Differences Between HTML and XHTML

The iframe element is not supported in HTML 4.1 Strict DTD and in XHTML 1.0 Strict DTD.


Can I create a link to a page with a particular iframe open inside of it?

YES! You can.

Many people say that this is impossible, but we have come up with a way to do this via a slight hack. You cannot target the parent page and tell it what iframe should be open from a menu, but YOU CAN, target the child page and make sure it contains the script to make it ALWAYS open in a particular parent page.

So suppose you want a page named "demo.html" to open. By default, it contains an iframe with a catalog of items. The hard-coded child page inside the iframe is, say, "white.htm". Now, you would like to have a link that opens that same page, but with the internal frame named "yellow.htm" inside the iframe.

This is simple to do, simply put the following script inside the page named "yellow.htm" and then link directly to the child page... this script will force it to open in the "parent" window, or the one named "demo.html".

iframe parent window

You would link to each of the "child pages" to open the parent with the corresponding child page open in the iframe. You may also have it already scrolled to a certain point on the child page by using an anchor tag in the child page.

Test this script here.

We have created three test pages:

  1. white.htm - link to the internal page and the default internal frame.
  2. yellow.htm - link to another page to open in the same parent
  3. red.htm - yet another link to open in the same parent, scrolled to the middle.

So the effect looks as if we can control not only the particular iframe loaded, but even where on the page it loads, all with just a little bit of JavaScript and html.

Here is the script:

This goes in the PARENT PAGE: (in the <head>)

Just copy and paste it into the head of the INTERNAL page, with the URL of the parent.
In this example, the URL of the parent is test.html

This goes in the CHILD page: (in the <head>)

As above, you would replace:

  • NAMEOFPARENTPAGE.HTML with the name of your page.
  • NAMEOFYOURIFRAME with the name of your iframe.

For our demonstration, we used the name "demo.html" for the parent page.
We used red.htm, yellow.htm, and white.htm for the child pages.


What is: "exploit.iframe.gen"?

A trojan (virus) that spreads via an iframe. Any scripts that are running in an iframe can jump to the site that they are embedded in.

This particular one came from Russia and was somehow spread to legitimate websites via SQL injection or FTP password sniffing - the exact mechanism is unknown.

Most of these iframe trojans are difficult to spot as they use a few clever tricks... for example, if it appears in a wordpress blog, you may examine the code and not see any iframes. But you will see some encrypted code, usually using base_64 or gz_inflate which hides the code from those who would remove such things if they could easily find them.

They are also usually placed way to the right on a PHP page so that if you open the infected file in your editor, you might not notice that you would need to scroll way offscreen to the right to find it.


What is a "frameborder"?

This is an attribute which tells the browser whether or not to display a border around your iframe. There are two examples below:

Iframe with a border Iframe without a border
(We have left scrolling enabled so that you might see the iframe.)

Sample iFrame HTML

Below is a demonstration of two iframes. One with frameborders, and the other without. You can dynamically load different content by clicking on the two links below each frame. Page-2 is with a colored background so that you can easily see the boundaries of the iframe in the borderless example.

To direct a link to open inside of an iframe, the code is simple. You merely name the iframe, and then set the link as shown below. We have named our iframe "test". We then set the link to open in target="test".

Iframe with frameborders

Code:


Output:

page-1 | page-2 <--You can navigate by clicking on these links.



Iframe without frameborders

Code:


Output:

page-1 | page-2


View just the code for these iframes and the navigation.

>>>Close this section...


What is the Google iframe?

We get this question a lot actually, and we can only assume that it is related to the Google Custom Search Engine, or CSE. One of the choices that they have for the results page is for them to appear in an iframe. They put this iframe on your results page through the use of a JavaScript.

The Google iframe on CSE results pages is a standard sized iframe with no scrolling and no frameborder.


What are some Iframe alternatives?

Ajax offers a great alternative to an Iframe, whereby you may load content into a DIV dynamically using Ajax. Here is a free script you may try along with a demo:

Ajax Dynamic Content Script

A "UFrame" is an alternative, however it can only display content that is on your own page. There are additionally some very neat jquery techniques for iframe-like content without the use of iframes.

jquery offers some very unique iframe-like presentation techniques that can be very cutting edge and provide a visually exciting background for your content. See this page for a full demo (awesome Web 2.0 effect!):
http://demos.flesler.com/jquery/localScroll/

If you are looking for ways to put someone else's content on your page, then you can always use screenscrapers - but of course, be sure that the intellectual property owner would like you to use their content.

Lastly, RSS is another way to display content of others on your page.


How do you use iframe buttons?

An iframe may be controlled with buttons, images or whatever you wish. You can put the buttons inside of a form and even create a 'reset' button, but instead of using the reset command, you simply use a navigation button with the start page as the target. For more details on how to create buttons for iframes, see our simple iframe browser demonstration which includes tabs, buttons, mouseover images and more.


Iframe content?

While researching commonly searched terms, we encountered this one, and can only assume that this regards the original target frame of an iframe. For the iframe tag, the correct attribut is "src", as shown below:

<iframe src="http://www.cnn.com">You need an iframes enabled browser to see this.</iframe>

This is how you set the original content for your iframe.

 


Iframe name

For a standard iframe without any navigation, JavaScripts or extras, a name is not necessary. However, if you want to have links open inside of your iframe, then a name is necessary.

An iframe can have both a name and an id, the name can be used for targeting the iframe with internal links, etc. The id may be used to identify the iframe by JavaScripts, such as a resizing script.


Can a pdf (Adobe Acrobat file) be embedded in an Iframe?

pdf iframeYes, pdf files will work beautifully inside of an iframe as long as the browser/user has the appropriate plugin installed.

All you need to do is be sure to correctly name the source file and include the .pdf extension at the end.

 


Iframe scrollbars

There are a number of questions about iframe scrollbars, but the attribute is a simple one. There are three possibilities:

  1. yes
  2. no
  3. auto

So the attribute looks like this: scrolling="yes" .

The most frequent question regarding scrollbars is how to turn off ONLY horizontal scrolling! When the W3C thought of this, they seem to have missed the idea that many developers would like to have content that scrolls vertically but NOT horizontally.

This is quite common, and fortunately, there is a fix for this - but it requires a bit of CSS magic. Read the next FAQ item "How to stop horizontal scrolling"...


How to stop horizontal scrolling...

Vertical Scrolling Only!
One question that comes up very often is that people often would like to include iframe content on their page, but they do not want the iframe to scroll horizontally.

It is simple to turn off scrolling completely with the scrolling command:
<iframe src="yoursource.htm" scrolling="no"></iframe>

…but now, your iframe will not be able to scroll vertically either. If you leave scrolling turned on, or on auto – then very often you will also see an unnecessary horizontal scroll bar at the bottom of your content that only scrolls a few pixels and serves no purpose other than annoyance.

There is a way around this.

No Horizontal Scrolling iFrame Code:

You must have access to the internal frame’s code to implement this solution. The internal iframe should have the following in its style:

Now the parent frame’s iframe tag may look like this:

That is all it takes to remove those pesky horizontal scroll bars and have a neat iframe that will only scroll vertically. You may modify some of these sizes and proportions to fit your page layout, but the code above works in all major browsers.


Iframe Trojans - what are they?

This is a subject that hits close to home, as my sites were once infected by these nasty viruses. 70 of them in one day. This was either done via FTP sniffing or SQL injection attacks - whichever it was, it was unsettling and iunfuriating.

Usually, these trojans seem to come from Russia or China and they will infect your site(s) by sticking a little iframe somewhere on your page. Now this iframe is invisible, as it is perhaps only 1 pixel by 1 pixel in size, without a frameborder and the contents may even be a transparent gif - so the page is invisible.

The bad part is that any scripts running on an internal iframe page, will spread to the main page! Here is a demo of how this works - BUT WITHOUT A TROJAN! :)

We have put this little trick into a table so that you can see just how it works, and how it could be dangerous for your PC!

The sneaky iframe is in a table panel to the right of this text and is 1 pixel by 1 pixel in size. You cannot see it at all... but any scripts that are in it, or that we put there will run just fine on this page.   → →

Click on THIS to load a page inside of this invisible iframe - the page you will load has a popup alert script in it to demonstrate how this works! This will not harm your computer. Click here to see the iframe - this will load a red page in it... look for a red dot!   ( reset | red dot | alert )

 

Unscrupulous malware writers will not be satisfied with simply putting an alert on your screen, they will usually use a hidden iframe to install malware, spyware, keyloggers or simply propagate viruses.

>>>more on iframe viruses...


Iframe width: about

The width attribute has two possibilities, percent or pixels. If you simply enter a number, the browser will interpret it as pixels, if you add the percent sign (%), then the browser will interpret it as a percentage of the current boundary - if it is inside of a DIV that is 300 pixels wide, it will extend to the boundaries of the DIV as defined by the stylesheet.

If you want it to take up the entire width of the page, it should be inside of an element that is the full page width - or perhaps you want a "Zero Frame"?


This is one of the most frequently asked questions, and the simplest to answer. To do so, you simply name your iframe like this:

'

We have named our iframe "foo". Then, any links that you want to open in your iframe should simply target "foo" like this:

Click here for a demo - Will open in a new popup window that you may analyze.


How to refresh an iframe:

The simplest way to refresh an iframe is with a link or button that simply reloads the original page. This would effect a manual refresh button and reload the original page when clicked.

Some folks want an automated refresh, and there are ways to do that - this may tax your server, so use it sparingly. You can use a meta refresh tag placed in the head of your document - the internal frame.

<head>

</head>

Replace the number "8" above with the number of seconds.

There is another method of doing this with JavaScript. Place this in the head of your internal frame:

Then place this in your body tag:

Replace the 8 with how many seconds you want between refreshes.


What is a Zero-frame?

A Zero Frame is a type of iFrame – but one that takes up the entire screen, without a visible frame around it. So in effect, you can display a page on someone else’s domain entirely on your page, and your URL will show in the address bar.

Why use a Zero Frame?

There are a number of reasons why you might want to do this…

  • → Hide affiliate links from unscrupulous link hijackers
  • → To run non-compatible scripts (run PHP on a Microsoft based server, for example)
  • → To seamlessly integrated externally hosted applications or shopping carts…

What does the code look like?
Here is the code for a “Zero Frame”:

 


Can I use the "Align" attribute.


The "align" attribute is being deprecated by the folks at W3C - the official standards organization for the World Wide Web.

Can I embed an iframe within an iframe?

Yes. You can use an iframe to contain sub-iframes. There are some translation pages which use this. Here is an example:

Translate Danish

They use nested iframes.

How can I load another page at say, the halfway mark?

Yes, if it is on your domain and you have access to the code. Simply insert an anchor tag and direct the iframe to open there.

See our example on our samples page.

to top