How to call javascript function specified in a child <frame>

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
– LoomyBear, Commented May 10, 2011 at 8:14

AstroCB · Accepted Answer · 2016-08-14 03:43:49Z

27

You can do it like this:

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

edited Aug 14, 2016 at 3:43

AstroCB

12.4k20 gold badges59 silver badges75 bronze badges

answered May 10, 2011 at 7:37

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lonesomeday Over a year ago

+1 Although it's probably a good idea to give the frame the ID first.

RoToRa Over a year ago

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.

LoomyBear Over a year ago

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 Over a year ago

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!

ALLSYED · Accepted Answer · 2016-03-10 07:57:55Z

2

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

answered Mar 10, 2016 at 7:57

ALLSYED

1,55117 silver badges16 bronze badges

Comments

ranjeetcao · Accepted Answer · 2013-10-01 11:43:35Z

1

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();

answered Oct 1, 2013 at 11:43

ranjeetcao

1,8632 gold badges24 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to call javascript function specified in a child <frame>

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related