brianSeagraves.comall things brian seagraves...

While working on a project for my day(night) job, I ran into an issue. By the way, The project is pretty cool. It's called NETBibleTagger, and it allows you to add verse recognition and real-time quoteing of scripture to your website with just 1 line of html. Go check it out!

I needed to know if an iframe had completed loading it source. The difficulty was compounded by the fact that the iframe was cross-domain, and, of course, due to security restrictions, you can't access it.

Typically, one could just put some javascript at the end of the iframe content to call a function on the parent page like this:

window.parent.handleResponse()

Due the security restrictions this fails in both IE and Firefox (FF). So, we need a way that doesn't fail. In FF we could just do this:

ourExampleIFrame.onload = handleResponse;

 Where handleResponse is a function in the parent doc. This works for FF but not IE. For IE we need to use the onreadystatechange and the readyState property. Like this:

if (IE) { ourExampleIFrame.onreadystatechange = handleResponse; }

Now we have to add some logic to our handle response function because the ready state will change multiple times in the iframe's loading cycle. Here are all of them from Microsoft's MSDN SIte:

• uninitialized - Object is not initialized with data.
• loading - Object is loading its data.
• loaded - Object has finished loading its data.
• interactive - User can interact with the object even though it is not fully loaded.
• complete - Object is completely initialized.

So, here is our handleResponse function that will handle calls from both the IE and FF methods.:

function handleResponse() { var ourExampleIFrame = document.getElementById('ourExampleIFrame') if (((IE) && (ourExampleIFrame.readyState == "complete")) || (!IE)) { //Do amazing Stuff } }

We check to see if the browser is IE and if it is we we want to make sure that the object is completely initialized. OR if the browser is not IE(it's FF) we do our stuff anyways because FF will only make the call when the frame is done loading.
Note: The IE variable I use is a boolean I have already set, you will have to do the same.