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.

Test this script here.

We have created two pages:

  1. test.html - The parent page
  2. 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:

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!

  1. test2.html - The parent page - it will open with a non-breaking page. Click the link to the breakout page to test this script.
  2. 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.)

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:

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:

Traduzione Italiano

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.

to top