Adding Dynamic Contents to IFrames
I found myself in a situation this weekend where I needed to add some contents to an iframe dynamically, and naive as I were, I kind of assumed it was straight forward to do it using the DOM.
To try it out I created a simple HTML page adding a div element and a function onPageLoad which would be called when the page was loaded and here I would place my code to dynamically add some contents to the iframe which I also decided to create dynamically just for the sport of it.
<html>
<head>
<title>Adding Dynamic Contents to IFrames</title>
<script type="text/javascript">
function onPageLoad()
{
var iframe = document.createElement("iframe");
var canvas = document.getElementById("canvas");
canvas.appendChild(iframe);
var div = iframe.document.createElement("div");
div.style.width = "50px"; div.style.height = "50px";
div.style.border = "solid 1px #000000";
div.innerHTML = "Hello IFrame!";
iframe.document.body.appendChild(div);
}
</script>
</head>
<body onload="onPageLoad();">
<div id="canvas" style="border: solid 1px #000000; height: 500px; width: 500px;"></div>
</body>
</html>
My first attempt failed both in Internet Explorer and Firefox, worst in Firefox which announced that iframe.document didn’t have any properties, and in Internet Explorer the div element was placed after the iframe element not inside intended.I did some research using Google in an attempt to get some qualified help and I learned that there are just as many ways to get the iframe’s document as there are browser platforms, almost. But happy to have found myself in some kind of progress I updated my code for the onPageLoad function.
function onPageLoad()
{
var iframe = document.createElement("iframe");
var canvas = document.getElementById("canvas");
canvas.appendChild(iframe);
var doc = null;
if(iframe.contentDocument)
// Firefox, Opera
doc = iframe.contentDocument;
else if(iframe.contentWindow)
// Internet Explorer
doc = iframe.contentWindow.document;
else if(iframe.document)
// Others?
doc = iframe.document;
if(doc == null)
throw "Document not initialized";
var div = doc.createElement("div");
div.style.width = "50px"; div.style.height = "50px";
div.style.border = "solid 1px #000000";
div.innerHTML = "Hello IFrame!";
doc.body.appendChild(div);
}
My progress was limited, I succeeded in eliminating the error when viewing the page with Firefox, but now it no longer worked in Internet Explorer which announced that doc.body was null.You might wonder why I choose to append the iframe to an element which already exists in the DOM before appending anything to the iframe’s document, that is because I found out that as long as the iframe is not appended to the DOM the document property will not be initialized, this happened both for Internet Explorer and Firefox.Reading the post, I had found, a little more thoroughly I found out that there was a way to write to the iframe’s document using the document.write method. Trying it out I changed my onPageLoad function to write a small text.
function onPageLoad()
{
var iframe = document.createElement("iframe");
var canvas = document.getElementById("canvas");
canvas.appendChild(iframe);
var doc = null;
if(iframe.contentDocument)
// Firefox, Opera
doc = iframe.contentDocument;
else if(iframe.contentWindow)
// Internet Explorer
doc = iframe.contentWindow.document;
else if(iframe.document)
// Others?
doc = iframe.document;
if(doc == null)
throw "Document not initialized";
doc.open();
doc.write("Hello IFrame!");
doc.close();
}
Finally I was able to render the page both in Internet Explorer and Firefox with the same result, I was doing some real progress. Now I could of course create all of my contents in the iframe this way, as the post I found using Google suggested, but it wouldn’t be that dynamic plus I would have to do a lot of string manipulation in order to add event handlers and so on.
My biggest problem being that I only had access to an amputated version of the document element in the iframe I started thinking about ways in which I could make a callback function from the iframe sending the document element to the parent. But in the end the solution was extremely simple and perhaps some of you who read this whill think that it is obvious.
The real trick for making this work only occurred to me while writing this, I tried to add my div element to the iframe’s document element right after the part where I write “Hello IFrame!” as shown above, this gave me the following changed onPageLoad function.
function onPageLoad()
{
var iframe = document.createElement("iframe");
var canvas = document.getElementById("canvas");
canvas.appendChild(iframe);
var doc = null;
if(iframe.contentDocument)
// Firefox, Opera
doc = iframe.contentDocument;
else if(iframe.contentWindow)
// Internet Explorer
doc = iframe.contentWindow.document;
else if(iframe.document)
// Others?
doc = iframe.document;
if(doc == null)
throw "Document not initialized";
doc.open();
doc.write("Hello IFrame!");
doc.close();
var div = doc.createElement("div");
div.style.width = "50px"; div.style.height = "50px";
div.style.border = "solid 1px #000000";
div.innerHTML = "Hello IFrame!";
doc.body.appendChild(div);
}
The magic appeared, now I got my div element added to the iframe’s document element right after the text I wrote using the write method. The next natural step was to leave out the call to the write method. Calling the open method following by the close method will put the iframe’s document in such a state that you will be able to use the appendChild method.
The only thing left to do after this was to wrap it all up nicely in a class, below is a simplified version of what an IFrame class might look like. Notice that the parent element must be added to the DOM already, but in most cases that shouldn’t cause any problems.
function IFrame(parentElement)
{
// Create the iframe which will be returned
var iframe = document.createElement("iframe");
// If no parent element is specified then use body as the parent element
if(parentElement == null)
parentElement = document.body;
// This is necessary in order to initialize the document inside the iframe
parentElement.appendChild(iframe);
// Initiate the iframe's document to null
iframe.doc = null;
// Depending on browser platform get the iframe's document, this is only
// available if the iframe has already been appended to an element which
// has been added to the document
if(iframe.contentDocument)
// Firefox, Opera
iframe.doc = iframe.contentDocument;
else if(iframe.contentWindow)
// Internet Explorer
iframe.doc = iframe.contentWindow.document;
else if(iframe.document)
// Others?
iframe.doc = iframe.document;
// If we did not succeed in finding the document then throw an exception
if(iframe.doc == null)
throw "Document not found, append the parent element to the DOM before creating the IFrame";
// Create the script inside the iframe's document which will call the
iframe.doc.open();
iframe.doc.close();
// Return the iframe, now with an extra property iframe.doc containing the
// iframe's document
return iframe;
}
I saved the class in a file called IFrame.js, and using this class simplified my test page to the following.
<html>
<head>
<title>Adding Dynamic Contents to IFrames</title>
<script type="text/javascript" src="IFrame.js"></script>
<script type="text/javascript">
function onPageLoad()
{
var canvas = document.getElementById("canvas");
var iframe = new IFrame(canvas);
var div = iframe.doc.createElement("div");
div.style.width = "50px"; div.style.height = "50px";
div.style.border = "solid 1px #000000";
div.innerHTML = "Hello IFrame!";
iframe.doc.body.appendChild(div);
}
</script>
</head>
<body onload="onPageLoad();">
<div id="canvas" style="border: solid 1px #000000; height: 500px; width: 500px;"></div>
</body>
</html>
[...] Thomas Bindzus wrote an interesting post today on Adding Dynamic Contents to IFramesHere’s a quick excerptMy progress was limited, I succeeded in eliminating the error when viewing the page with Firefox, but now it no longer worked in Internet Explorer which announced that doc.body was null. You might wonder why I choose to append the … [...]
Internet Explorer Script Error » Blog Archive » Adding Dynamic Contents to IFrames
December 24, 2007 at 12:37:11
Thanks for this code saved my neck
it worked like a charm on Firefox and ie
Cristian Medeiros
March 6, 2008 at 05:11:18
Heres another article on javascript resizing for iframes.
colin
April 9, 2008 at 22:49:47
Another great example of how broken the whole web browser business is.
George
July 30, 2008 at 20:29:51
How would you add attributes to the iframe – like width=”550″ scrolling=”no” height=”700″ and such? Great articles by the way
Jeromy
September 18, 2008 at 03:53:47
here’s how you add attributes to the iframe:
var frm=document.body.appendChild(document.createElement(’IFRAME’));
frm.src=’http://www.google.com’;
frm.id=”masterdiv”
frm.width=”150px”; frm.height=”150px”;
frm.marginWidth=”0″; frm.marginHeight=”0″;
frm.scrolling=”no”;
frm.style.position=”absolute”;frm.style.left=”10px”; frm.style.top=”10px”;
mahesh
September 23, 2008 at 06:56:55
Thanks for this article! I was banging my head against the same wall and didn’t find any other good solutions myself or online.
I might be able to just use a scrolling DIV, but there are times when an iframe is preferable.
Kendall Brookfeld
January 28, 2009 at 11:56:17
Brilliant!!
The perfect blend of problem description, logic path development with each step fully coded, a very useful wrapper class, an example using the wrapper, and it works!!
I have only tested in FireFox … but your cross browser selectivity looks solid.
I salute you!!
Your explanation about creating the doc property still has me wondering how you figured that out! I have studied the Rhino book a lot … and that cleverness eludes me.
I would enjoy your valued opinion on web development text books and online resources. (I went through dozens of online sites before stumbling upon your gift to all.)
Thank you for your efforts to share knowledge with others.
The comment about using a scrolling div was also very helpful to this novice.
The author nickname “DrJokepu”’s comments in the following was also helpful for styling the iframe’s internal content:
http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe
Tom Hollister
February 7, 2009 at 13:26:07
I am humbled by the gratitude for my simple article, over time I have had a lot of visits to this post. I didn’t realize when I wrote it that so many people would still be using iframes and in desperate need for a post like mine.
It gives me great happiness that I have been able to share, since I have often been in need and found tons of useful information on other peoples blogs about JavaScript especially, programming in general, management and life itself
I don’t posses a whole lot of text books on web development, my favorite book of all times about JavaScript is as you mentioned yourself the Rhino book from O’Reilly (JavaScript: The Definitive Guide by David Flanagan ISBN: 0-596-00048-0). It actually happens to be the only book I posses about web development, even though I have been working with web development for 10 years now
When writing the blog on iframes I spend an entire day searching on Google for good references, and that is normally the way I find online resources, but I never stick to one particular site. It’s a bit embarrassing that I didn’t include any references for my post, but Mozilla’s own developer pages helped me a lot.
Thomas Bindzus
February 8, 2009 at 10:52:04
Great post.
I am building a system that will be integrating a userscript (greasemonkey script) into a website via iframe using this type of scripting.
Should this still be able to work? I assume cross browser might be an issue, but as long as i can get it to work on *A* browser thats all I care about.
Travis McCrea
February 21, 2009 at 04:26:08
Hi Travis,
It is a little hard to say based on what you write, but recently I had a similar problem, I loaded another page into an iframe and needed to access JavaScript functions and objects from the page in the iframe.
Let’s say the page in the iframe has a function:
function doTest() { alert("This is a test!"); }Then you can access this function from your main page by accessing the iframe.contentWindow in the following way
Hope this helps you out, the contentWindow is available both for IE and FF (at least for IE6 and FF3). If you have more questions then feel free to contact me
Best wishes
- Thomas
Thomas Bindzus
February 21, 2009 at 19:15:20
Excellent post saved my time. Thanks a lot Thomas
Ramya
May 12, 2009 at 11:52:17