Error: Permission denied to access property '$

Question

I have a problem using an iFrame in an Bootstrap Modal. Its a News System, and i load the News Content from an iFrame from another Subdomain. Everything works fine, if a user clicks on an Image from the any news item, i want to open a Lightbox (Fancybox) in the Parent Window. Thats normally not the problem, i am using something like this:

// so i know its an Popup / has an iFrame (class Popup is when it is opened in an BS Modal) - otherwise ill go to my news size and show the article there.

$('a[rel="lightbox"]').click(function(e) {
    e.preventDefault();

    var link = $(this).attr('href');

    if ($(this).closest('body').hasClass('popup')) {
        parent.$.fancybox({

// this is without any popup

    $.fancybox({
        href: link,
        ...

My Images are on another Domain - like static.site.com. When ill go to news.site.com - and open an Popup (now its from the same domain) - and click an image - everything is fine, the

 parent.$ 

works fine.

But, from the main site (www.site.com) when i am opening the Modal (Contents from news.site.com) and then click on the image (static.site.com) ill the the following error:

Error: Permission denied to access property '$' 

I have already allowed the PHP Header to load content from another subdomain - but ill get still this error.

Do i need to use JSONP (to load the Content of the Page as HTML?) - or is there another, simpler Solution?

Answer 1

You need to set both domains to the same top level domain in JavaScript:

A page may change its own origin with some limitations. A script can set the value of document.domain to a subset of the current domain. If it does so, the shorter domain is used for subsequent origin checks.

So if you have static.example.com and news.example.com you should include this JavaScript to run before you try any cross-frame access:

document.domain = 'example.com';

You will need to run this code in both windows.