Dev Explorer
Advice, tutorials and tips for beginner and experienced software/web application developers
The Full Page iFrame Made Easy
Date Published: 25/02/2009 21:22When 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
A quick guide for ASP.NET developers on how to manually trigger ASP.NET events from JavaScript.
An article for users of MySQL databases describing how they can use advanced stored procedures to improve efficiently in their applications.
A guide for LAMP developers to using stored procedures in MySQL and extending the MySQLi class.
An introduction to using the xlwt and xlrd modules for python to interact with Microsoft Excel spreadsheets.
This is an introduction to making HTTP requests from a python script/application using httplib.