Call parent jquery function from inside an iframe?

Question

Let's say I have this page "index.php" and in it I have this link that calls a pop up box:

<a href="#" id="signinlink">Sign in</a>

the jquery function is:

<script type="text/javascript" charset="utf-8">
    jQuery(function() {
        function launch() {
             jQuery('#sign_up').lightbox_me({centered: true, onLoad: function() { jQuery('#sign_up').find('input:first').focus()}});
        }
        jQuery('#signinlink').click(function(e) {
            jQuery("#sign_up").lightbox_me({centered: true, onLoad: function() {
                jQuery("#sign_up").find("input:first").focus();
            }
        });
    });
</script>

How from iframe to call this function?

(* the iframe is called from parent page "index.php") I think i must add a link with

window.parent.callme();

But how? please help!

@mplungjan It looks like pseudocode you put here. for the jquery to work, there's a bit more to do... — naugtur, Feb 16 '13 at 22:19
What is `jQuery(function() {\* Do something*\});` doing there? — Jehanzeb.Malik, Feb 16 '13 at 23:59
Plus you will find a lot of questions already on SO. So I am flagging it. — Jehanzeb.Malik, Feb 17 '13 at 00:00
@naugtur nope. Not pseudo code. Just clicking the link in the parent frame. Should work, assuming the event handler is setup correctly I am using plain Dom access since OP has not told us if there is jquery loaded in the iframe — mplungjan, Feb 17 '13 at 05:19
@mplungjan Ok, I just didn't get it that `click()` could be what OP wanted. — naugtur, Feb 17 '13 at 09:57

score 1 · Answer 1 · edited May 23 '17 at 12:27

First of all - if the iframe is something to do with login form - it should send its own content itself. The code should be there, not get called in the parent frame.

Anyway, your question is missing some details on what exactly you want to do.

To access stuff from parent you do:

window.parent.functionname() instead of just functionname()

So

$(document).find(...) would become window.parent.$(window.parent.document).find(...)

To access the iframe from the parent, you need to fetch contentDocument of the iframe DOM node.

This is also helpful: How to expose IFrame's DOM using jQuery?

If you can make your question clearer, it might be possible to show you an example of code that works with what you have.

mplungjan · Answer 2 · 2013-02-17T09:16:40.407

This works for me - but only if I set jQuery to 1.8 OR add jQuery migrate since the lightbox-me needs the deprecated in 1.8 and deleted in 1.9 browser detection code

DEMO

in iframe (assuming no jQuery in iFrame):

<a id="parentsignin" href="#">Signup</a>

using

window.onload=function() {
  document.getElementById("parentsignin").onclick=function() {
    parent.document.getElementById('signinlink').click();
    return false;
  }
}

Actually, you might want to do this in parent - notice I cancel the link itself with preventDefault and reuse the code:

function launch() {
  $('#sign_up').lightbox_me({ 
    centered: true, 
    onLoad: function() { 
      $('#sign_up').find('input:first').focus();
    }
  });
}


$(function() {
  $('#signinlink').click(function(e) {
    e.preventDefault(); // stop the link from being followed
    launch(); 
  });
});

Call parent jquery function from inside an iframe?

2 Answers2