The Full Page iFrame Made Easy

Date Published: 25/02/2009 21:22

When developing websites one of the most frowned upon practises in the modern industry is the use of frames. Framesets are a massive no-no and are soon to be completely excluded from the W3C XHTML 2.0 specification. However, from time to time the only way to meet the clients demands is to use an iframe. We have all used them at one time or another, whether it be because the child frame is hosted elsewhere to that of the parent or when merging 2 web projects built on differing platforms. In this article I will discuss what I believe is the best way to implement a full page iframe which disguises its true identity.

I would not suggest using this as a permanent solution to any problem but as a temporary fix it works really well. There is no javascript involved or any modifications to the child window meaning it should work in all browsers and on all platforms. I included some style rules to hide redundant scrollbars in Internet Explorer since when the page does exceed the vertical height of the window IE simply disables the bars as opposed to removing them (like firefox, safari and chrome).

Setting up the Parent Window

The following code is all you need for the parent window, it is entirely XHTML valid and to implement it simply change the URL for the iframe to the page you want to display. If you wish you may move the style rules into a separate stylesheet, I have included them in the doc here to keep it all together for demonstration purposes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Full Page IFrame</title>
<style type="text/css">
html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;}
</style>
</head>
<body>
<iframe id="tree" name="tree" src="CHILD PAGE URL GOES HERE" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
</body>
</html>

There it is, the full page iframe made easy. If you have any questions or issues you would like to discuss feel free comment below and I will try my best to assist.

Comments

Sorry comments are currently disabled for maintenence

5 Most Recent Articles

Manually Triggering Events in ASP.NET from JavaScript

A quick guide for ASP.NET developers on how to manually trigger ASP.NET events from JavaScript.

Advanced Use of MySQL Stored Procedures

An article for users of MySQL databases describing how they can use advanced stored procedures to improve efficiently in their applications.

Using MySQL Stored Procedures and Extending MySQLi in PHP

A guide for LAMP developers to using stored procedures in MySQL and extending the MySQLi class.

Reading and Writing to Excel Spreadsheets in Python

An introduction to using the xlwt and xlrd modules for python to interact with Microsoft Excel spreadsheets.

Interact with the Web Using Python and the HTTP Library

This is an introduction to making HTTP requests from a python script/application using httplib.

Sponsors