How to call javascript function inside an adjacent iframe

Question

I have an html page where I have this layout essentially:

<html>
<body>

<!-- iFrame A -->
<iframe></iframe>

<!-- iFrame B -->
<iframe></iframe>
</body>
</html>

In IFRAME "B", I'd like to call a js function in IFRAME "A", which will ultimately change the window.location property and redirect the page. I have jquery at my disposal as well, but have been unable to figure out a way of calling something in that adjacent frame.

Any suggestions?

Are all 3 on the same domain? If not, which are on each domain, and which do you control? — Matthew Flaschen
– Matthew Flaschen, Commented Sep 11, 2010 at 23:58

bcherry · Accepted Answer · 2010-09-12 06:14:52Z

7

Assuming everything is on the same domain, and you have two iframes with ids "iframe-a" and "iframe-b", with jQuery in the parent:

In frame A:

function foo() {
  alert("foo from frame A");
}

From frame b:

window.parent.$("#iframe-a")[0].contentWindow.foo();

And you should see "foo from frame A" get alerted.

answered Sep 12, 2010 at 6:14

bcherry

7,2482 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mplungjan Over a year ago

why [0] ? and why parent? window.$("#iframeA").contentWindow.foo(); should be enough assuming id="iframeA" since you should always have unique IDs

mirezus Over a year ago

I'm not sure why that works, but it does. I'll have to research this some more. Thanks for your insights @bcherry

bcherry Over a year ago

@mplungjan - Since we're in frame B, we have to traverse up to the parent before we can query for frame A, since it is not part of B's DOM. The [0] gets the raw DOM node from the jQuery object, so we can access contentWindow.

bcherry Over a year ago

@mirezus - the contentWindow property on an iframe is the "global object" for that iframe. Within the iframe, it's just called window. Hope that helps.

mplungjan Over a year ago

Hmm, I cannot seem to get it to show now, but I remembered when the iframe could access the parent window it was in using window. and not needing parent. which was needed in real frames

mplungjan · Accepted Answer · 2010-09-12 08:46:01Z

1

In some browsers, the window.frames array is only populated if the frames are named, rather than having only an ID If the frames are named and the content are from the same origin (domain, port, protocol), then window.frameb.functionName() will trigger the function in standard javascript. See other answer(s) for jQuery version

answered Sep 12, 2010 at 8:46

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

stevebot · Accepted Answer · 2010-09-12 05:47:12Z

0

Use window.parent to get the parent (the main window) then use window.frames on the parent window to get frame B. From there call your function.

answered Sep 12, 2010 at 5:47

stevebot

24.2k35 gold badges133 silver badges187 bronze badges

1 Comment

mplungjan Over a year ago

In some browsers, the window.frames array is only populated if the frames are named, rather than having only an ID

Collectives™ on Stack Overflow

How to call javascript function inside an adjacent iframe

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related