JavaScript

  1. Home
  2. Computing & Technology
  3. JavaScript

Force Page into an Iframe

clr gif
Join the Discussion

Questions? Comments?

Having the content of your web site appear in an iframe is not greatly different from using a frameset except for the fact that it has fewer pages that need to be loaded to be displayed at once. The code to keep your pages within an iframe is also similar to that which is used to keep a site framed the biggest difference being that you may wish to allow the page from the iframe to be displayed separately in a popup window on browsers that don't support iframes. We'll take that into account in coding our script.

The first step is to define the Javascript code that goes into our web page that contains the iframe so that we can tell it which page to display in that iframe:

This code goes in the body of your page where you want the iframe to be placed. The noscript content caters for browsers with Javascript disabled while the content of the iframe allows those whose browsers don't support iframes to see a link that will allow them to load the page into a separate window.

You can of course change the size of the iframe to suit your requirements as long as you make sure that the entries in both the script and noscript portions of the page match except for the substitution of the curl variable.

The only other change that you need to make in order to keep your pages iframed is to add the following Javascript code into the head section of every page on your site (substitute the name of the page containing your iframe for mypage.html):

if (self.location == top.location &&
location.search.substring(1) != 'nf')
top.location.href = 'mypage.html?' + escape(self.location);

If a page containing this code is accessed from outside of the iframe then provided that the browser supports Javascript this code will cause the page with the iframe to be loaded in its place and the current page address will be passed to be loaded into the iframe.

If the browser doesn't support Javascript then the individual page will still display outside of the iframe. There is nothing we can do about that. The noscript section of the iframe page ensures that the iframe still displays correctly if Javascript is not available and the content of the iframes handle the situation where the browser doesn't support iframes.

Since we are loading the page into a separate browser window when the page doesn't support iframes we don't want that window trying to reload the page back into an iframe again. To stop this from happening we pass it a query string of 'nf' to tell it that it is allowed to be displayed without the iframe wrapper in this instance.

Explore JavaScript

About.com Special Features

Build Your Own Website

Step-by-step advice on how to do everything from choosing a Web host to promoting your content. More >

Connect Your Home Computers

Easy ways to connect two computers for networking purposes. More >

JavaScript

  1. Home
  2. Computing & Technology
  3. JavaScript

©2009 About.com, a part of The New York Times Company.

All rights reserved.