Jeroen W Jeroen W - 1 month ago 4x
jQuery Question

Change element on page according to element in iFrame on same domain

reading a lot of posts and answers about accessing content of an iFrame,
I try and combine these to my particulair case.

Unfortunately I can't get it to work, so maybe I'm missing some mental ability to add the dots ;)

What I try to do is as follows:

The page loaded in my IFrame (same domain) contains a menu, where my active items have

class="menuactive" data-rel="SomeName"
. My parent page contains a div with links (#portfolioslider) that have id's corresponding to the data-rel attributes of the links in the iFrame.

So where in the iframe the links are for instance
<a href="bla" class="menuactive" data-rel="Fashion">Fashion</a>
, on the parent page my elements are
<span id="Fashion">Fashion</span>
, on which I want to add a class
at the same time as my iFrame reloads and adds the
to a menu item.

This seems the most logical approach:

Javascript in pages loaded in iFrame:

$(function() {
$(' a.menuactive').ready(function() {

$('#portfolioslider a').each(function() {


Bit this doesn't work at all,

I wished I could make a jsFiddle but I can't seem to find out how to construct an iFrame there.

Any thought would be greatly appreciated!, thanks guys

kind regards,



I fixed it, using:

$(' a').click(function() { 
    $('', window.parent.document).removeClass("active"); 
    $('#' + $(this).attr('data-rel'), window.parent.document).addClass("active");

Cheers, Jeroen