Document.Domain madness

Question

I've spent probably a month researching the internet on this issue and have yet to find the answer to this. My code does the following (all Javascript).

Let's say I have a test.html on mydomain.com

1. Very first thing in head section i set document.domain = 'mydomain.com';

2. Then, dynamically create iframe, set src to "subdomain.mydomain.com/test2.html"

3. Append iframe to DOM

4. subdomain.mydomain.com/test2.html: very first thing in head section: document.domain = 'mydomain.com';

5. test2.html has on_dom_ready event that tries to communicate with parent via window.parent

Works in all browser. even in IE6! The only problem is: when I refresh the page in IE, I get the access denied error.

The only way I can get rid of this error is to wait 12 seconds before calling window.parent. Not even 5 seconds help, I literarely have to wait 12 seconds. It makes no sense to me.

Anyone has any experience with this?

Answer 1

It's because the onload event in the parent frame isn't triggered yet and so the DOM isn't completely built. Here's a kludge that will scan for a div at an interval until it is present, without blowing up:

var minmax_SCANDELAY= 500;
var minmax_scanner;

function minmax_scan() {
    if (!window.parent.document.getElementById('content')) return;
    window.clearInterval(minmax_scanner);

    //replace following function call with your own.
    doYourMagicHere();
}

minmax_scan();
minmax_scanner= window.setInterval(minmax_scan, minmax_SCANDELAY);

Answer 2

Furtive's Answer helped me a lot! He was 100% correct on the fact that the onload event is indeed the issue. I've looked deeper into my code and I found, that before creating the the child iframe, I am lazy loading some scripts with below technique:

lazy_load: function(url,on_finish_function)
{
 var head = document.getElementsByTagName("head")[0];
 var script = document.createElement("script");
 script.src = url;
 var done = false;

 var This = this;
 // Attach handlers for all browsers
 script.onload = script.onreadystatechange = function()
 {
  if ( !done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete"))
  {
   done = true;
   on_finish_function.call(This,null);
   head.removeChild( script );
  }
 };
 head.appendChild(script);
},

The above function modifies the HEAD section of the document. The child iframe gets spawned at on_finish from this lazy_load function.

My guess is, that the IE browsers get really scared of this and take 12 seconds to recover from the shock of having the document modified like this :) What can I do about this issue? Why does the IE take sooo long to recover from the lazy_load dom manipulation?