iframe click event to change location/URL (cross domain but have control of both domains)

Question

I'm working on a site which comprises off the main site - then campaign sites which are off-shoots.

The campaigns are on a separate domain (but I have access to both).

The campaigns are pulled into the main site via an iframe and each iframe will contain the main sites menu (this gets pulled to the campaign site via a proxy).

What I need is that if a link on the main navigation gets clicked the actual browser location will change rather than just the iframe. So that the browsers URL changes and the user actually leaves the page with the iframe.

I'm aware of the same origin policy which is why I'm having so much trouble - BUT as I have control of both and can modify scripts on each I figure there must be a way around this?

I've been trying things like

    $(function(){
    $('#menu a').click(function(){
        var linkLocation = $(this).attr('href');
        //parent.location.href=linkLocation
        parent.location.replace(linkLocation)
        return false;
    });
});

but it doesn't seem to work regardless of domain its placed on.. any pointers / help / suggestions greatly appreciated.

Andy

Answer 1

Shouldn't it be window.parent rather than just parent? From inside the iframe you should be able to do window.parent.location = linkLocation;

Edit: You also have the option to do

var links = document.getElementsByTagName('a');
for (var i=0; i<links.length; i++) {
  if (links[i].href.indexOf('javascript:') == 0 || links[i].href.indexOf('mailto:') == 0) {
  }
  else {
    $(links[i]).attr('target', '_parent');
  }
}