• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2582
  • Last Modified:

Call a function in an iframe from the parent page

Experts, I have several iframes on a page and need to call to a function IN the iframe FROM the parent "top" page. How would I go about this?

~ C
0
clickclickbang
Asked:
clickclickbang
  • 3
  • 2
  • 2
  • +1
3 Solutions
 
b0lsc0ttIT ManagerCommented:
clickclickbang,

Simple.  Use something like the following.

parent.functionname();

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
RichieHindleCommented:
Main HTML (main.html):

<html>
<body>
<button onclick='document.frames.myframe.myfunction()'>Click me</button>
<iframe name='myframe' src='iframe.html' width='200' height='200'>
</body>
</html>

Frame HTML (iframe.html):

<html>
<head>
<script type='text/javascript'>
function myfunction() {
    window.alert("Hello");
}
</script>
</head>
<body>
<p>This is the iframe.</p>
</body>
</html>

0
 
b0lsc0ttIT ManagerCommented:
Let me know if there is some issue for some reason or if you need details.  That is in html in the iframe calling a function in the parent's html.  Let me know if I misunderstood what you need.

bol
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
RichieHindleCommented:
Oops!  document.frames doesn't work in Firefox.  Here's the correct main.html:

<html>
<body>
<button onclick='window.frames.myframe.myfunction()'>Click me</button>
<iframe name='myframe' src='ee-iframe-2.html' width='200' height='200'>
</body>
</html>
0
 
clickclickbangAuthor Commented:
RichieHindle is on the right track. I need the parent to call a function in the child frame. However, how would I go about this with a dynamic ID for the frame? Also, would there be a way to verify the function exists before calling it to avoid an object not found error?

Thanks guys!
0
 
DireOrbAntCommented:
If the FRAME/IFRAME got an ID="MyFrameID", then something like:
var MyFrame = document.getElementById('MyFrameID');
if (MyFrame.MyFunction) MyFrame.MyFunction();
0
 
RichieHindleCommented:
Here you go; this main.html lets you enter the name of the frame and the name of the function, and gives you an error if either isn't there:

<html>
<head>
<script type='text/javascript'>
function go(frame_name, function_name) {
    var iframe = window.frames[frame_name];
    if (!iframe) {
        window.alert("There's no frame called '"+frame_name);
        return;
    }
   
    if (typeof(iframe[function_name]) == 'undefined') {
        window.alert("There's no function called '"+function_name);
        return;
    }
   
    iframe[function_name]();
    return false;
}
</script>
<body>
<form>
Enter the frame name ('myframe'): <input type='text' name='frame_name' size='12' value='myframe'><br>
Enter the function name ('myfunction'): <input type='text' name='function_name' size='12' value='myfunction'><br>
<button onclick='go(document.forms[0].frame_name.value, document.forms[0].function_name.value)'>Click me</button><br>
<iframe name='myframe' src='ee-iframe-2.html' width='200' height='200'>
</form>
</body>
</html>
0
 
clickclickbangAuthor Commented:
Thanks guys! I'll give it a shot!
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now