Question

I have several embedded iframes on my page and I’m looking for a click event inside the iframe to trigger an alert on the parent frame. (both iframe & parent frame are same domain).

iFrame HTML element (the iframe has a class of class="iframe1":

<a class="button" href="#">Trigger Parent Frame Alert</a>

iFrame jQuery:

$(document).ready(function() {  
  $('.button').click(function() {
    window.parent.triggerAlert();
  });
});

Parent Frame jQuery:

$(document).ready(function() {
function triggerAlert(){
    alert('iFrame button has been clicked');
  }
});

I’m thinking my parent frame function is incomplete – and not entirely sure the iframe can communicate with the parent DOM?

I have previously tried this alternative with no luck in the parent frame:

$('.iframe1').contents().find('.button').click(function () {
  alert("iFrame button has been clicked");
});

Answer 1

In order to make your function visible to the iframe you need to declare it as a member of the window object:

$(document).ready(function() {
    window.triggerAlert = function (){
        alert('iFrame button has been clicked');
    }
});