Create an iframe with these simple tools and references.
Everything you need to build your own iframes
No page on iFrame HTML would be complete without a section on scripts. iframe scripts have gotten a bad rap lately, due to the fact that some malicious hackers have used them to stage a wide variety of attacks and exploit a number of browser vulnerabilities. We cover those malicious scripts on this page, but more important are the scripts to expand the functionality of your iframes. See below for more tips and tricks that will be useful for web developers.
Reference Guide for basic HTML tags for iframes.
Forcing an iframe To Open in the Parent Window
Suppose you have a page that is designed to be viewed and/or navigated by a parent window. Then someone finds your internal iframe with Google and doesn't see that the page was built and intended to be used with a parent frame or navigation frame! How can you force your internal page to only open with the parent?
All you need to do is put this code into the head of the daughter or internal page, with the URL of the parent page you want to use! In this case, the parent page is test.html.
Test this script here.
We have created two pages:
Click on either link and you will see that they always open the internal frame inside the parent page.
Frame Breakout Script
Forcing your page out of someone else's iframe:
Use this script to keep your page from being trapped in someone else's iframe:
Put this in your document's head:
Put this in the body tag as shown:
Here is the same example as above, only the internal frame is now designed to break out of the parent frame!
- test2.html - The parent page - it will open with a non-breaking page. Click the link to the breakout page to test this script.
- testpage2.htm - link to the internal page that will now break out of the frame
Resizable iframe | Auto height iframe
An iframe that resizes automatically to match the length of the content. Suppose you load RSS feeds into an iframe... they come from someone else's server, but you are authorized to display them... how can you match the page length to fit the iframe?
Here is a script that will do just that:
Automatically Resizing Iframe Script
Resizes to accomodate the contentPut this in the <HEAD> of your document:
Call the iframe with this code in the body:
Note: If some of your internal frame is chopped off, simply add some empty space to the bottom of the document by using <br /> or <p> tags.
>>>Close this section...
Another solution posted at WebDeveloper.com claims to work cross browser! Now that's something.
One way to do it is with PHP:
You can also use the docShell interface:
Microsoft Internet Explorer supports a Security Attribute. See our Security page for more details.
Can I make all of the links inside of an iframe open in a new window?
Yes. The code for doing this is on our samples page. You can make all links open in a new window or another iframe.
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:
They use nested iframes.
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.
What is a "UFrame"?
A uframe is a project written by a progammer named Omar Al Zabir.
According to the codeplex site, UFrame combines the goodness of UpdatePanel and IFRAME in a cross browser and cross platform solution. It allows a DIV to behave like an IFRAME; loading content from any type of page: static or dynamic.
Uframe supports ASP.NET postback and you can have DataGrid or any other complex ASP.NET control within a UFrame. UFrame works perfectly with ASP.NET MVC making it an replacement for UpdatePanel.
You can use UFrames with:
HTML ASP .NET PHP JSP any other platform.
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?