Invoking javascript in iframe from parent page

Question

Basically, I have an iframe embedded in a page and the iframe has some javascript routines I need to invoke from the parent page.

Now the opposite is quite simple as you only need to call parent.functionName() but unfortunately I need exactly the opposite of that.

Please note that my problem is not changing the source url of the iframe, but invoking function defined in the iframe.

Answer 1

http://www.quirksmode.org/js/iframe.html

Answer 2

Assume your iFrame's id is "targetFrame" and the function you want to call is targetFunction():

document.getElementById('targetFrame').contentWindow.targetFunction();

You can also access the frame using window.frames instead of document.getElementById.

Answer 3

The IFRAME should be in the frames[] collection. Use something like

frames['iframeid'].method();

Answer 4

In the IFRAME, make your function public to the window object:

var myFunction = new function(args) 
{
   doStuff();
   return;
}

For access from the parent page, use this:

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

Answer 5

There are some quirks to be aware of here.

1. HTMLIFrameElement.contentWindow is probably the easier way, but it's not quite a standard property and some browsers don't support it, mostly older ones. This is because the DOM Level 1 HTML standard has nothing to say about the ‘window’ object.

2. You can also try HTMLIFrameElement.contentDocument.defaultView, which a couple of older browsers allow but IE doesn't. Even so, the standard doesn't explicitly say that you get the ‘window’ object back, for the same reason as (1), but you can pick up a few extra browser versions here if you care.

3. window.frames['name'] returning the window is the oldest and hence most reliable interface. But you then have to use a name="..." attribute to be able to get a frame by name, which is slightly ugly/deprecated/transitional. (id="..." would be better but IE doesn't like that.)

4. window.frames[number] is also very reliable, but knowing the right index is the trick. You can get away with this eg. if you know you only have the one iframe on the page.

5. It is entirely possible the child iframe hasn't loaded yet, or something else went wrong to make it inaccessible. You may find it easier to reverse the flow of communications: that is, have the child iframe notify its window.parent script when it has finished loaded and is ready to be called back. By passing one of its own objects (eg. a callback function) to the parent script, that parent can then communicate directly with the script in the iframe without having to worry about what HTMLIFrameElement it is associated with.

Answer 6

       $("#myframe").load(function() {
            alert("loaded");
        });

Answer 7

that works super dude. thanks for the code.

Answer 8

Just for the record, I've ran into the same issue today but this time the page was embedded in an object, not an iframe (since it was an XHTML 1.1 document). Here's how it works with objects:

document
  .getElementById('targetFrame')
  .contentDocument
  .defaultView
  .targetFunction();

(sorry for the ugly line breaks, didn't fit in a single line)

Answer 9

Hi guys ! Some thing I don't understand a bout this code.

function parents(){ var iframe = document.getElementById("textbook"); iframe.contentWindow.getLocation(window.frames["textbook"].document.body); }

This is Ok. It ran. But if I replace the second line by this line. It not work.

iframe.contentWindow.getLocation( *document.getElementById("textbook").*document.body);

after a day i understood more about it. Thanks in advanced.

Answer 10

Calling a parent JS function from iframe is possible, but only when both the parent and the page loaded in the iframe are from same domain i.e. abc.com, and both are using same protocol i.e. both are either on http:// or https://. The call will fail in below mentioned cases:
1. Parent page and the iframe page are from different domain.
2. They are using different protocols, one is on http:// and other is on https://.

Answer 11

is there a way to call javascript in the iframe when the iframe page comes from another domain? I get the error 'Permission denied for .... to get property Window.myFunction from ...'