Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Call a function in an iframe from the parent page

Posted on 2006-10-23
8
Medium Priority
?
2,573 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…
Suggested Courses

971 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