Is it possible to modify a page in HTML, from an embedded item in the same page?

Question

I have two pages: the main, and the secondary one. The secondary will be embedded in the main one. While I'm able to insert the secondary page into the main one, I don't have full access to the code. I would like to change some things in the main page by sending some instructions/scripts that would be included in the secondary page, so that when the main calls the secondary, the main will be changed by the instructions/scripts running in the secondary. Is it possible? What should be the way to follow?

Answer 1

"The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it."
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Live demos:
http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
https://gist.github.com/pbojinov/8965299

I've done this in SoloLearn but the code needs to be moved/refactored.
I also have (working here) web workers that use a similar post system if you want more about the postMessage concept.

One thing you need to establish early is if the server security headers will allow communication (CORS headers or site's agreement to share info between a container and iframe). Both pages being on the same site will help a lot.

Answer 2

I assume, but still have to ask: Are you using an iframe?

Answer 3

Yes. I am using an iframe.