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.
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.
Steve
27/02/2009 11:24
wow, been looking for a solution to this annoying problem everywhere. Thanks
Martijn
27/02/2009 23:32
O my god, u are GOD! ^^ I was looking for this for a very long time... You fixed it the right way! Going to give you credits and a link on my site to here. Thanks!
Laurens V.
04/03/2009 11:38
Thanks, this is helpful.
Mike
05/03/2009 20:54
As much as I hate to use iframes, I have bookmarked this post : Thanks.
Roger
08/03/2009 17:05
Much MUCH appreciated, thank you!
Dennis
17/03/2009 23:31
Finally!!!! Google is full of sites with people that promise you the solution... Nothing worked! And finally i found a simple "script" that worked! Thanksssss!
Tarun
16/04/2009 15:37
I have one page in which i have iframe whose src is whith some parameter.when i Call the same page with diffrent parameter the same page is open in src of iframe .i need How we can referesh the Iframe src
Henry Espinoza
01/05/2009 17:13
Do you know of a way to use iframes with a PDF and hide the scroll bar?
tak
11/05/2009 02:35
I have a login page that is located on the iframe page and it doesn't work.
tak
11/05/2009 02:37
I have a login page that is located on the iframe page and it doesn't work in IE.
Dev Explorer
11/05/2009 09:16
I've used forms in iFrames previously and I have not had any issues with them. Chances are that you are either using an iFrame through to a page which is not on the same domain as the parent page which may cause issues with the cookies. It may also be an IE only problem with the form as I have had instances in the past whereas IE posts different values to firefox in certain circumstances. Are you sure everything is working fine when you just access the child page without the iFrame?
Faruk
16/07/2009 13:50
It fine. But I have problem, Problem is i want a iframe which have no scroll, and show its full content. I design a page which have a table(width=100%
Bassie
21/08/2009 14:45
Thanks man, solved quite a few of my problems!