Iframe onload event is not a good idea to listening child page loading state on Internet Explorer. Here are some solutions to make things better.

None-Cross-Domain

If the parent page and the child page is in the same domain, they can share the objects between the windows. For example: “window.parent.document.getElementById(’div_01′)” will be fine. So we can easily get things done. Just like this:

<!--This is an inner page in the iframe-->
<script type="text/javascript">
window.onload=function{
  window.parent.iframeCall();
}
</script>

Cross-Domain

According to REFERENCES Q239638 and Q188763, there are two ways:

1.Timer & document.readyState

var fm1=window.frames["iframe1"];
var fmState=function(){
  var state=null;
  if(document.readyState){
    try{
      state=fm1.document.readyState;
    }catch(e){state=null;}
    if(state=="complete" || !state){//loading,interactive,complete
      //onComplete();
      return;
    }
    window.setTimeout(fmState,10);
  }
};
window.setTimeout(fmState,400);//call this statement when iframe page start to change

A few microseconds is need, because DOM actions is asynchronous, we need to wait until the action has started.

2.onreadystatechange & counting state

var stateID={};
var fmStChange=function(){
  if(ifFirstLoad) return;
  stateID[this.id]=stateID[this.id] ? stateID[this.id]+1:1;
  switch (stateID[this.id]){
    case 1:
      //state loading
      //onComplete(STEP1);
      break;
    case 2:
      //state interactive
      //onComplete(STEP2);
      break;
    case 3:
      //state complete
      //onComplete(LASTSTEP);
      break;
  }
  if(stateID[this.id]>=3) stateID[this.id]=null;
};
$("iframe1").onreadystatechange=fmStChange;
//if you want to ignore the parent page load
//add the following two line
var ifFirstLoad=true;
$("iframe1").onload=function(){ifFirstLoad=false;}

The process will return three types of state: loading,interactive and complete. But don’t disturb the loading process untill one is finished, or else the stateID will not tell the correct state .

document.domain property

An article said document.domain property will be use to fix “Access Denied Error”:

The document.domain property can be set to ease the restriction somewhat.For example, if a document at www.example.com wants to communicate with a document at forums.example.com, the document.domain property could be set to example.com in both documents to allow JavaScript interaction between them.

I never try out, but I don’t think this will work.

None-IE

Iframe onload event is good for Firefox, Opera and Safari.

Popularity: 77% [?]

  Tags: English, javascript