How to create and write to an iframe without jQuery

Recently, I had an issue where I was trying to figure out how to create an iframe, and then append some items into it. Well, it turns out to not be nearly as complicated as I thought.

Create the iframe

We need to create the iframe without using a src. This way the browser won’t try to load anything into the frame itself.

	var docElem = window.document;
	var iframe = doc.createElement("iframe");
	iframe.height = iframe.width = 0;
	docElem.appendChild(iframe);

Notice we created a 0x0px iframe that we appended to the DOM

Add some content

Now, we just need to add some items to the newly created iframe.

	iframe.document.appendChild(obj);

Hmm, that isn’t working properly in all browsers. Well it turns out, first you need to actually get the proper content window for the iframe before we write to it.

Getting the proper content window to write to an iframe

	if (iframe.contentWindow){
	        iframe = iframe.contentWindow;
	}else{
	        if (iframe.contentDocument && iframe.contentDocument.document){
	                iframe = iframe.contentDocument.document;
	        }else{
	                iframe = iframe.contentDocument;
	        }
	}

Now that we actually have the proper context to be able to write to the iframe, lets take a look at how to do it.

Properly writing to an iframe

var img = document.createElement("img");
img.src = "someurl.jpg";
iframe.document.open();
iframe.document.appendChild(obj);
iframe.document.close();

Putting it all together in one place

Here is the full code in one place to see how it works

	var docElem = window.document;
	var iframe = doc.createElement("iframe");
	iframe.height = iframe.width = 0;
	docElem.appendChild(iframe);

	if (iframe.contentWindow){
	        iframe = iframe.contentWindow;
	}else{
	        if (iframe.contentDocument && iframe.contentDocument.document){
	                iframe = iframe.contentDocument.document;
	        }else{
	                iframe = iframe.contentDocument;
	        }
	}

	var img = document.createElement("img");
	img.src = "someurl.jpg";
	iframe.document.open();
	iframe.document.appendChild(obj);
	iframe.document.close();

Summary

Why would you use a hidden iframe to show an image? Well, the reason is more about caching items in a browser than actually showing an image. Truth be told, many of the major websites use something similar to cache content for subsequent pages on the site. The technique is different and each browser requires some special logic. But the gist of it remains the same. So the next time you need to create an iframe and write to it, this is the proper techinique.

  1. create an iframe
  2. append the iframe to the DOM (otherwise, the iframe element doesn’t have the proper content window to discover)
  3. detect the content window
  4. open the iframe to writing
  5. write to the iframe
  6. close the iframe
  7. Get Beer!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>