Possible to access a function on a parent page from an iframe that is on a different subdomain?

Question

I am trying to access a function located on the parent page from an iframe. I get the following error since they're using different sub-domains:

Uncaught SecurityError: Blocked a frame with origin "http://subdomain.domain.com" from accessing a frame with origin "http://subdomain2.domain.com". Protocols, domains, and ports must match.

I am using:

window.parent.myFunction(); 

to access the function on the parent page.

Is there a workaround for this or will it simply not work because they're different sub-domains?

Answer 1

Blocked a frame with origin "http://subdomain.domain.com" from accessing a frame with origin "http://subdomain2.domain.com"

If you add the line:

document.domain = 'domain.com';

to the scripts in both frames, they will be able to interact directly with each other's objects. See MDN for background.

However cross-frame scripting is strewn with nasty corner cases, where one frame executes something from another frame whilst that frame is busy doing something else, or isn't yet fully loaded. For anything non-trivial, I would avoid direct cross-frame scripting.

The more modern alternative is to keep execution within a single frame, and communicate across frames using postMessage. Support.

Answer 2

This will only works if you have access to the parent domain (e.g. upload files there).

Inside your iframe page, create a second iframe with a source pointing to a page in the main domain.

The second iframe can call a function in the main page by using window.parent.parent.myFunction();