Trigger function from within iframe to parent

Question

I have the following function in an iframe :

function modalHgt() {
    windowHeight = $(window.parent).height();
    complementHeight = $('#complement').outerHeight(true)+20;
    popupHeight = $('#main').outerHeight(true);
    if ((popupHeight) > (windowHeight-complementHeight)){
        popupHeight = windowHeight-complementHeight;
    } else {
        popupHeight = $('#main').outerHeight(true)+15;
    }
    $("#sbox-window", top.document).height(popupHeight);
}

and I need to call the same function in the parent when resizing. I tried the following but it doesn't work:

$(function() {
    var modalHeightTimer;
    $(window).resize(function() {
        clearTimeout(modalHeightTimer);
        modalHeightTimer = setTimeout($.modalHgt, 50);
    });
});

Can you please suggest how can I call the iframe function in parent?

chiliNUT · Accepted Answer · 2013-11-18T02:05:33.270

1

modalHeightTimer = setTimeout(window.parent.modalHgt, 50);

Let parent call a function in an iframe:

$('#theIFrame')[0].contentWindow.functionName();

But it looks like your iframe's function is an anonymous ready function, so if you want the parent to call it you will have to actually declare a function inside the iframe, like

function functionName() { //contents; }

if you want to call it from the parent

edited Nov 18 '13 at 02:05

answered Nov 18 '13 at 01:50

chiliNUT

18,989
14
66
106

I get the following error: `Error: useless setTimeout call (missing quotes around argument?)` – otinanai Nov 18 '13 at 01:51
I think I misunderstood. I thought you wanted to call a parent function inside of an iframe. but I think actually, you want to call a function in the iframe, from the parent document? – chiliNUT Nov 18 '13 at 02:02
exactly. this is what I'm after. I tried your suggestion but I get: `contentWindow is undefined` - and as you can see in my OP I have declared the function inside iframe like this `function functionName() { //contents; }`. – otinanai Nov 18 '13 at 02:09
It works fine if I write this: `$('iframe[name=contentFrame]').get(0).contentWindow.modalHgt();` thanks to this post: http://stackoverflow.com/questions/10167460/i-get-an-undefine-error-in-iframe – otinanai Nov 18 '13 at 02:15
However I can't make it work with the `setTimeout` function. I still get this error: `useless setTimeout call (missing quotes around argument?)` – otinanai Nov 18 '13 at 02:20
My bad! It works with: `modalHeightTimer = setTimeout(jQuery('iframe[name=contentFrame]').get(0).contentWindow.modalHgt, 50);` Thanks for your input. – otinanai Nov 18 '13 at 02:33
oh. lol yeah I thought that's what you were doing in the first place. glad it all worked out! – chiliNUT Nov 18 '13 at 02:33
I think that `jQuery('iframe[name=contentFrame]').get(0)` and `jQuery('iframe[name=contentFrame]')[0]` are different syntax for the same thing. good stuff. – chiliNUT Nov 18 '13 at 02:35
based on this article: http://stackoverflow.com/questions/10167460/i-get-an-undefine-error-in-iframe I was mixing native javascript with jQuery. I'm not sure what's really the difference but since it works I'm not going to dig any deeper... :P – otinanai Nov 18 '13 at 02:40
1

the `.contentWindow` stuff is javascript. using `get(0)` or `[0]` returns the 0th (first) matched element of the `jQuery` selector as a `JavaScript` object. It is a fairly common trick used to access `JavaScript Only` methods of an object selected by `jQuery` – chiliNUT Nov 18 '13 at 02:46

Trigger function from within iframe to parent

1 Answers1