Solved

Call a function in an iframe from the parent page

Posted on 2006-10-23
8
2,558 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 200 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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
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 50 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 250 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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

734 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