Setting Javascript Context to iFrame in an iFrame

Question

I have a page with an <iframe>, and inside that <iframe> another <iframe> pops up as a window. What I'm trying to do is call a function that is set in the <iframe>'s <iframe>.... I know, lot's of the same tag going on.

Here's what I mean in HTML format.

<body>
 <iframe src="blahblah.html" name="iframe">
  //blahblah.html html
  <iframe src="blahblahpopup.html" name="iFrame2">
   //blahblahpopup.html html, also where the function is set.
  </iframe>
 </iframe>
</body>

So, as you can see, there is an <iframe> in an <iframe>.

Now lets get down to business. I'm using this JS code to get my JS context into the first level <iframe> with the name 'iframe'

window.frames['iframe'].showAssetPicker();

What that does is it calls the popup inside the first-level <iframe>. But now I need to call a function inside of the popup that was just called. (which is yet another <iframe>... I'm not the cause of all the <iframe>'s...)

So here's my failed attempt of calling a function defined in the second-level <iframe>...

window.frames['iframe'].frames['iFrame2'].populateTypePullDown('/getdata/');

I also tried

window.frames['iframe'].window.frames['iFrame2'].populateTypePullDown('/getdata/');

Neither seem to work. Any help with this? I am using node-webkit to remove <iframe> security restrictions.

Thanks for any help you can throw my way!

P.S. Goodness gracious, I said <iframe> far too many times in this post.

Have you tried using window.frames['iframe'].contentWindow instead? — Marco Bonelli
– Marco Bonelli, Commented May 5, 2015 at 18:55
It says the function is not defined. Which means I'm not getting in the correct context.. — Darryl Huffman
– Darryl Huffman, Commented May 5, 2015 at 19:07

huysentruitw · Accepted Answer · 2015-05-05 19:11:43Z

3

Probably the issue is that you don't wait before the Asset Picker is loaded and therefore the function populateTypePullDown is not yet defined.

Try something like this:

$('#iframe')
    .ready(function() {
        var $innerIframe = $(this).contents().find('#iFrame2');
        console.log($innerIframe, 'ready');
        $innerIframe.get(0).contentWindow.populateTypePullDown('/vsg/ipm/SecuredOfferRepository');
    })
    .get(0).contentWindow.showAssetPicker();

answered May 5, 2015 at 19:11

huysentruitw

28.2k10 gold badges95 silver badges141 bronze badges

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

4 Comments

Darryl Huffman Over a year ago

Sounds like a good answer, but I just figured it out using your answer from the other question. :)

huysentruitw Over a year ago

Glad you sorted it out yourself. :)

Darryl Huffman Over a year ago

Do you mind if I ask you one last thing? How could I run a script through the context of an iframe? Like, instead of just calling a function.

huysentruitw Over a year ago

You could inject a script tag and set the src attribute, if that is what you want. $innerIframe.contents().find('body').append($('<script>').attr(src, 'js/myscript.js'));

Darryl Huffman · Accepted Answer · 2015-05-05 19:25:20Z

2

Figured out the answer. What I did was I reached inside the main <iframe>, and got the contentWindow of the <iframe> inside.

$('#iframe').contents().find('#iFrame').get(0).contentWindow.performSearch();

answered May 5, 2015 at 19:25

Darryl Huffman

2,5993 gold badges24 silver badges41 bronze badges

Collectives™ on Stack Overflow

Setting Javascript Context to iFrame in an iFrame

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related