iFrame HTML | iFrame html, tricks, tips and code

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.

iFrame Scripts

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.

<SCRIPT LANGUAGE='javascript'>try { if (top == self) {top.location.href='test.html'; } } catch(er) { } </SCRIPT>

Test this script here.

We have created two pages:

test.html - The parent page
testpage.htm - link to the internal page

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:
<script type="text/javascript">  </script>

Put this in the body tag as shown:
<body onload="breakout_of_frame()"><body onload="breakout_of_frame()">

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

There was another method for blocking your content from someone's iframe, and that is the method that CNN had chosen. They had a script that completely prevented the page from loading, leaving the iframe empty. It appears that they continue working on this, as their page breaks out in Internet Explorer, but stays inside the iframe in Firefox. You can test it by trying to load the CNN page in our iframe browser. Then try to load: http://www.cnn.com

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:

Click the links below to load a short page or a long page into an iframe:
Short Page | Long Page

See this demo by itself in a new page (break it out of this page.)

>>>Click to view script...

Automatically Resizing Iframe Script

Resizes to accomodate the content

Put 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.

Cross-browser resizeable iframe.

Disabling Javascript inside an iframe

There are a couple of ways to do this, but not with JavaScript. PHP code is the most reliable as you can simply strip the Javascript out of the site... however, this should not be used to steal someone else's content, but only if you wish to browse a site safely and without risking any hostile malware injections with an iframe browser.

One way to do it is with PHP:
$page = file_get_contents('URL HERE');// use CURL if possible echo strip_javascript($page, 0);// 0 = allow no javascript function strip_javascript($filter, $allowed=0){ if($allowed&1 == 0) // 1 href=... $filter = preg_replace('/href=([\'"]).*?javascript:.*?\\1/i', "'", $filter); if($allowed&2 == 0) // 2 <script.... $filter = preg_replace("/<script.*?>.*?<\/script>/i", "", $filter); if($allowed&4 == 0) // 4 <tag on.... ---- useful for onlick or onload $filter = preg_replace("/<(.*)?\son.+?=\s*?(['\"]).*?\\2/i", "<$1", $filter); return $filter; }

You can also use the docShell interface:
nodeIframe.docShell.allowJavascript = false;

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:

Translation Polish

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.

It can load pages having both inline and external Javascript and CSS, just like an IFRAME. But unlike an IFRAME, it loads the content within the main document and you can put any number of UFrames on your page without slowing down the browser.

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.

UFrame is 100% Javascript making it a cross platform solution.

You can use UFrames with:
HTML
ASP
.NET
PHP
JSP
any other platform.

>>>more on uframes...

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!