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

 


Back
Forward

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 browser



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

 



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.

 

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.

to top