How to call javascript function specified in a child

Question

I'm working on a ancient project which is based on and tags.

Here's the common HTML structure of the parent page (index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>  
</head>
<frameset rows="75px,*" frameborder="0">
    <frame name="frame1" src="frames/frame1.html">
    <frameset class="child_frameset">
        <frame name="frame3" src="frames/frame3.html">
    </frameset>
</frameset>
</html>

Here how I specify the javascript function on the child frame (frame3.html):

<!DOCTYPE html>  
<html lang="en">  
<head>
    <script type="text/javascript">
        function helloWorld(){
            alert('hello world!');
        }
    </script>   
</head>
<body>
    <h1>I'm frame 3</h1>
</body>
</html>

My task is to call helloWorld() function. How do I do that?
Thanks in advance!

yes! I'm trying to call the **helloWorld()** function from the parent page (index.html) — LoomyBear, May 10 '11 at 08:14

score 25 · Accepted Answer · edited Aug 14 '16 at 03:43

25

You can do it like this:

document.getElementById('frame3').contentWindow.helloWorld();

edited Aug 14 '16 at 03:43

AstroCB

12,337
20
57
73

answered May 10 '11 at 07:37

Jayantha Lal Sirisena

21,216
11
71
92

+1 Although it's probably a good idea to give the frame the ID first. – lonesomeday May 10 '11 at 07:41
3

The frames in the example don't have an id, so `getElementById` isn't really appropriate. With just a name use `window.frames["frame3"].helloWorld()` instead. – RoToRa May 10 '11 at 07:43
Thanx for a quickest reply... I tried all of this but firebug console returns me **window.frames.frame3 is undefined** and **document.getElementById("frame3") is null** (please note I gave frame an id="frame3") ... any thoughts why? – LoomyBear May 10 '11 at 08:11
It's actually works! With one simple tune ... I had to specify the DOM lad event and then trigger the function `$(window).load(function(){ document.getElementById("frame3").contentWindow.helloWorld(); });` ... works like a charm! – LoomyBear May 10 '11 at 09:09

score 2 · Answer 2 · answered Mar 10 '16 at 07:57

You can call method from childframe

window.frames[n].frames[m].methodName()

where n , m are integers starting from 0.If you have document only one frame remove the frames[m] part and get the job done.

Ya one more thing , do trial an error and find out exact frame numbers and method. Hope this helps

score 1 · Answer 3 · answered Oct 01 '13 at 11:43

Check for contentWindow, contentDocument and get the frame object and perform call.

var siblingFrame;
if (parent.document.getElementById('siblingFrameId').contentWindow){
  siblingFrame = parent.document.getElementById('siblingFrameId').contentWindow;
} else if (parent.document.getElementById('siblingFrameId').contentDocument){
  siblingFrame = parent.document.getElementById('siblingFrameId').contentDocument;
} else if (parent.document.getElementById('siblingFrameId')) {
  siblingFrame = parent.document.getElementById('siblingFrameId');
}

siblingFrame.helloWorld();

How to call javascript function specified in a child

3 Answers3

Linked

Related