Question

I have nested iframes and I would like to use onload function for the inside frame. For example:

<script type="text/javascript">
 var testing = 'test';
 var curFrames;
 var curUrl;
 var mFrames;
 var cFrame;
 var editor;
 var editor2;

 window.onload=CodeOnLoad;

 //Javascript that runs on load
 function CodeOnLoad() {
  curFrames=document.getElementsByTagName("frame");

  console.log(curFrames[0])

  //onload for 1st frame  
  curFrames[0].onload = getInside;


  function getInside() {
   //onload for second frame - Not working 
   curFrames[0].contentDocument.getElementByid('the_iframe').onload = finalFrame;
  }

  function finalFrame() {

   curUrl= curFrames[0].contentDocument.getElementById("the_iframe").src;
   console.log(curUrl);

   if (curUrl.indexOf("post")!=-1)
   {
    mFrames=document.getElementsByTagName("frame");
    cFrame = mFrames[0].contentDocument.getElementById('the_iframe');
    editor = cFrame.contentWindow.tinymce.activeEditor;
    console.log(editor);    
   }
  }
 }

 </script>

The code (second callback):

curFrames[0].contentDocument.getElementByid('the_iframe').onload = finalFrame;

is never executed.

Is it possible to do it like that?

I want to ensure that all frames are loaded before executing any code.

Thanks

Answer 1

Consider below as your window tree

Parent Window (P1)

—-Iframe 1 (I1)

——–Iframe 2 (I2)

Now in p1, keep function say pfunc, in which you code whatever you want to code

in I1 keep a function as below

   function callParent()
   {
       parent.pfunc();
   }

in I2 on window onload call below function

function callParent()
{
   parent.callParent();
}

this will do as you want.