How can i call a javascript function from a child window to an iframe where in main window?

Question

i've a main file : index.php it has 1 iframe : main

<iframe src="main.php" id="main_frame" name="main_frame" >
</iframe>

main.php has 2 iframe : middle_frame and top_frame

<iframe src="middle.php" id="middle_frame" name="middle_frame"  >
</iframe>

<iframesrc="pageTop.php" id="top_frame" name="top_frame"  >
</iframe> 

middle.php has 2 iframe : middle_left_frame , middle_right_frame

<iframe src="middle_left.php" id="middle_left_frame" name="middle_left_frame"  >
</iframe>

<iframe  src="middle_right.php" id="middle_right_frame" name="middle_right_frame" >
</iframe>

When i run only the middle_left.php i can call a javascript function Button1JSClick from a child window with that way :

opener.Button1JSClick(event);

but, when i run to index.php and other file i can't use this way.

how can i do it?

Answer 1

there is no opener in iframes.

Try window.Button1JSClick(event); or top.Button1JSClick(event); for topmost window, parent.Button1JSClick(event); for one level up (which is top one level down)

However since you are using jQuery, load the pages into divs with relevant overflow

<div id="content">
  <div data-src="main.php" id="main_frame">
    <div data-src="pageTop.php" id="top_frame"></div> 
    <div data-src="middle.php" id="middle_frame">
      <div data-src="middle_left.php" id="middle_left_frame"></div>
      <div data-src="middle_right.php" id="middle_right_frame"></div>
    </div>
  </div>
</div>

using something like

$(function() {
  $("div").each(function() {
    var src= $(this).data("src");
    if (src) {
      if (this.id==="middle-left-frame") {
        $(this).load(src,function() { Button1JSClick() });
      }
      else $(this).load(src);
    }
  });
});