Calling parent child function in frame

Frame is partition of window into many windows. It is useful when we want to keep things separate from other windows. Frame helps us to include header or footer or menu navigator in left or right side.

Everything works fine if we don't have work with one frame to other frame. It is not possible that frame is not linked with other frames. So we need to interact with other frames with JavaScript function.

Every frame is parent or child of parent. Every frame has own id and frame name which differentiate one frame to other frames. We denote frame as child or parent. This makes it easy to access other frame from frame to frame.

Let's take an example we have three frames

one is left frame

second is top frame

third is main frame

left frame name=”leftFrame”

top frame name=”topFrame”

main frame name=”mainFrame”

We have a javascript function in child parent in main frame.

Syntax of calling frame function

parent.frameName.functionName()

We want to call this function from top frame.

parent.mainFrame.callFunctionMain();

If you want to call function of top frame from main frame

parent.topFrame.callIt();

full code example 

<html>
<head>
<title>Main Frame</title>
</head>

<frameset rows="*" cols="80,*" frameborder="yes" border="1">

  <frame src="left.html" name="leftFrame" id="leftFrame"  />

  <frameset rows="80,*" frameborder="yes" border="1" >
    <frame src="top.html" name="topFrame"  id="topFrame"  />
    <frame src="main.html" name="mainFrame" id="mainFrame"  />
  </frameset>

</frameset>
</html>

left.html

<html>
<head>
<title>left Frame</title>
</head>

<body>
This is left Frame
</body>
</html>

top.html

<html>
<head>
<title>top Frame</title>
<script>
function callIt()
{
  alert("This is function calling");
}

function callMainParent()
{
  parent.mainFrame.callMain();
}
</script>
</head>

<body>
This is top frame

 <a href="javascript:callMainParent()">Call main frame function</a>
</body>
</html>

main.html

<html>
<head>
<title>Main Frame</title>
<script>
function callParent()
{
 parent.topFrame.callIt();
}

function callMain()
{
alert("This is main frame function");
}

</script>
</head>

<body>
This is main frame

 <a href="javascript:callParent()">Call top frame function</a>
</body>
</html>

Demo

Bookmark  

 

Leave a Reply

Security Code:

 

  Random Post