Improve company productivity with a Business Account.Sign Up

x
?
Solved

Call a function in an iframe from the parent page

Posted on 2006-10-23
8
Medium Priority
?
2,586 Views
Last Modified: 2010-04-07
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
Comment
Question by:clickclickbang
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 800 total points
ID: 17792365
clickclickbang,

Simple.  Use something like the following.

parent.functionname();

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

b0lsc0tt
0
 
LVL 14

Expert Comment

by:RichieHindle
ID: 17792372
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17792375
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 14

Expert Comment

by:RichieHindle
ID: 17792396
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
 
LVL 1

Author Comment

by:clickclickbang
ID: 17792760
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
 
LVL 26

Assisted Solution

by:DireOrbAnt
DireOrbAnt earned 200 total points
ID: 17793293
If the FRAME/IFRAME got an ID="MyFrameID", then something like:
var MyFrame = document.getElementById('MyFrameID');
if (MyFrame.MyFunction) MyFrame.MyFunction();
0
 
LVL 14

Accepted Solution

by:
RichieHindle earned 1000 total points
ID: 17794025
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
 
LVL 1

Author Comment

by:clickclickbang
ID: 17796136
Thanks guys! I'll give it a shot!
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

608 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question