iFrame HTML | iFrame html, tricks, tips and code

iFrame samples are the easiest way to learn how to create interesting effects and deliver page content using iframes. Here are some of our favorites.

iFrame Browser Effect

Creating a mini-browser using an iframe

We have created a simple browser type of control set for an iframe, as this has been frequently searched on the web. Above, you have the basic functionality of an iFrame based browser. View this browser on its own page by clicking here.

While this is all very cool, some might ask themselves... "What good is an iframe browser?" Hmmmm... well, suppose you share your computer with someone - perhaps an unpleasant room-mate, perhaps a mother-in-law, maybe a soon-to-be ex-spouse... all of these folks are known to check the browsing history of others.

You know where I'm going with this...

So open your browsing history. Keep it open while you do a little test... now use the mini browser above and search a few sites. Did you notice something? They do not show up in your browser's history. That's pretty cool, huh?

So if you want to browse without a history, all you need do is make a full screen version... you can include some of the security measures we outline on our security page to prevent break-out scripts, and voila...

We just know you will use this little trick for the betterment of mankind.

iframe Generator Demo

Using iframes to dynamically display script output on-page

You can use an iframe to instantly display the results of a PHP or other script. This is a short demo of a button creation script with the created button appearing in an iframe window.

Simple Button Generator:

Use this tool to generate your own buttons the easy way. You can customize the behaviors and colors, or simply use it to learn how to code buttons for yourself.

	This is the text that will appear on your button For some types of buttons - such as "reset" buttons and "back" buttons, they should obviously say reset or back!Enter your button's text
	Title Text This is the text that will appear when someone "hovers" over your button. Hover over our sample button above and wait a second and the tooltip will appear.Enter your title text.



B I U	Bold, Italics or Underline
	Font Color (Click to select)
	Background Color (Click to select)

Your button will appear above. Click on the "View Source" button for the HTML.

Scrolling inside the iframe

Setting an iframe to open a page in the middle and/or scrolling that page

Scroll to: A | B | C | D | Top
Enable frames to see this page.

Opening Links in One iframe From Another iframe

You can open links in one iframe from inside another. There are two ways of doing this... one is to have the frame of choice listed as the target, the other way is to use the base tag as shown below.

Making ALL links in an iframe open in a new page or another iframe

You can make ALL of the links inside one frame open in the other frame or in a new window/tab by using the base tag as shown below. You can set the target to "_blank" to open a new page for all links inside the iframe, or alternatively, to another iframe on the page.
<base target="_blank">

>>>View some sample iFrame HTML ...

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 better: Scrollto or using an anchor tag?

The scrollto command scrolls to different places in FF and IE, so it is usually better to use an anchor tag and point the link to it as we did in the scroller above.

Can I force my internal iframe to only open in the parent page?

Yes you can. See full instructions and two methods on our script page.

How can I quickly view the contents of someone else's iframe?

Right click on the internal frame and select properties. Firefox will let you open the internal frame in its own window.

Why don't some pages load in my iframe - and others jump out of it?
Some sites are jealous of their content and do not want it being held captive by other sites. There are scripts to make a page jump out of iframes. There is also a script to keep a page from loading in an iframe.

If you try to load the CNN page in the iframe to the left, you will not be able to load it. The error points to a JavaScript designed to do this on the CNN website.

The popularity of Digg, and the fact that they display content pages in their own iframe designed to look like a toolbar has probably prompted much work in this area.

Could you defeat this?

Yes, you could use PHP to rewrite the header without the offending script - but if someone does not want you using their content this way, it is best to leave their intellectual property as it is and create your own content.
See our scripts page for details about how to defeat this as well as how to keep your pages from being locked into iframes.

More...

iFrame or PHPinclude?
Like everything else in web development, there is a lot of flexibility and the developer must decide how to present the content to the end user.

iFrames are most famously used by Digg and Google - but many sites use them to present dynamic content.

iFramed content - if it is your own does not help your SEO - so if squeezing the last bit of potential for pure SEO purposes is your main goal, you might want to look at server side includes.

The best decision is an informed one, so look into both solutions before settling upon one. Neither one is the right choice for absolutely every situation.

iFrame Tricks
Beginners can have fun with iFrames and their results will look almost like AJAX. For example, here is a simple trick to hide the answer of a joke or question using an iframe. The iframe is displayed without a frameborder and using the same background color as this page. When the answer button is clicked, it loads in the invisible iframe. Try it!

Q: What's Black and Brown and would look good on a lawyer?