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

Asked 10/5, 2011 at 7:31 Answered 10/3, 2016 at 7:57

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!

Cagliari answered 10/5, 2011 at 7:31 Comment(2)

are trying to call the function from the parent? – Veda 10/5, 2011 at 7:34

yes! I'm trying to call the helloWorld() function from the parent page (index.html) – Cagliari 10/5, 2011 at 8:14

You can do it like this:

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

Lenka answered 10/5, 2011 at 7:37 Comment(4)

+1 Although it's probably a good idea to give the frame the ID first. – Maritamaritain 10/5, 2011 at 7:41

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. – Anatase 10/5, 2011 at 7: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? – Cagliari 10/5, 2011 at 8: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! – Cagliari 10/5, 2011 at 9:9

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

Arbitrage answered 10/3, 2016 at 7:57 Comment(0)

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

Avalon answered 1/10, 2013 at 11:43 Comment(0)

Recommended topics

Hot tags