Allowing an iframe to manipulate itself on same domain using only JavaScript

· 4 Comments · in JavaScript

Ok, this one I wrote is kinda cool. :)

I was working on a large corporate site that had iframes all over the place.

They had internal content(same domain) that would show up inside these iframes.

The problem – the content was random with varying sizes so some content would not display correctly in the iframe.

Needed to find a way for the code in the iframe to be able to manipulate it’s own iframe tag.

To make it worse, none of the iframes had unique ids to reference.

And, oh yea, no jQuery was being used on the site either. :(

I researched first but there was nothing out there that would work for this particular problem.

So I started from scratch.

My first thought was I need to identify an iframe that doesn’t even have an id, but how can I add an id from within it’s own iframe? Well, you really can’t.

I know I can reference the contents of an iframe from the parent, so what if I have the iframe set a unique “marker” within itself?

We can then reference that unique marker from within the same iframe itself by traversing thru the parent.

Yeah, sounds confusing, right? Let’s see if I can clarify.

  1. The iframe loads. (all of the following happens in the iframe)
  2. It appends a “marker” element within itself with a unique id.
  3. The iframe accesses the parent and grabs the array of iframes on the parent page.
  4. It then loops thru the iframe array and searches each iframe for the unique marker.
  5. Once the marker is found, it knows it has found itself and saves the parent’s reference to itself.
  6. It then uses that parent reference to make changes to itself.

JavaScript
This goes in the iframe source.

if(parent.document.domain){
	if(parent.document.domain === document.domain){
		//create marker
		var _marker = document.createElement('span');
		
		//generate random id
		var rnNow=new Date();
		var _markerId = "a" + rnNow.getTime().toString().split(".").join("");
		
		//set and append marker to this iframe
		_marker.style.display = "none";
		_marker.id = _markerId;
		document.body.appendChild(_marker);
		
		//get array of iframes in parent		
		var _iframes = parent.document.getElementsByTagName("iframe");
		
		//loop thru iframes array and search for our marker
		for(i=0;i<_iframes.length;i++){
			var _iframeDoc = _iframes[i].contentWindow.document;
			var _iframeId = _iframeDoc.getElementById(_markerId);
			if( typeof(_iframeId) !== 'undefined' && _iframeId !== null ){
				//if marker found then do something for this iframe
				//the parent reference to this iframe will be _iframes[i]
				//so you could do something like _iframes[i].style.width = "728px";
			}
		}
	}
}

No function is being called on the parent page, everything happens from the iframe source.

Since WP is giving me domain headaches, the full working example link is outside of WP.

When you click the “change myself” link on that page, it is using a random number to generate the ads, so you may see an ad appear twice or more in a row. Keep clicking.

You can see the full working example here.

Tested in:
FF 3.6+, Safari, Chrome, IE8+, iOS

Great books are available on JavaScript and jQuery.

This entry was posted in JavaScript and tagged .
Bookmark the permalink.

4 Responses to Allowing an iframe to manipulate itself on same domain using only JavaScript

  1. We’re a group of volunteers and starting a new scheme in our community. Your site offered us with valuable information to work on. You have done a formidable job and our whole community will be thankful to you.

  2. clarke ulmer says:

    Thanks, always good to hear!

  3. That is very interesting, You are an excessively skilled blogger. I’ve joined your feed and look ahead to in the hunt for extra of your magnificent post. Also, I’ve shared your web site in my social networks

  4. Anonymous says:

    Thanks for sharing this, its great :)

Leave a Reply

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

*

To include code in your comment: Paste your code in the comment form, select it and then click the language link button below. This will wrap your code in a <pre> tag(or shortcode) and format it when submitted.

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> <pre class="">