How to communicate between iframe and the parent site

When an iframe page needs to communicate with its parent site, it primarily relies on several mechanisms in JavaScript to achieve this. Below, I will detail several common communication methods and their use cases:

1. Using the postMessage Method

postMessage is a secure cross-origin communication method introduced in HTML5. It enables pages from different origins to exchange data while avoiding security vulnerabilities that might arise from direct DOM interaction.

Example of the parent page sending a message to the iframe:

javascript
// In the parent page
var iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello iframe!', 'http://iframe-domain.com');

Example of the iframe receiving a message:

javascript
// In the iframe
window.addEventListener('message', function(event) {
    if (event.origin !== 'http://parent-domain.com') {
        // Verify the sender's origin by checking event.origin
        return;
    }
    console.log('Received message from parent:', event.data);
});

2. Directly Manipulating DOM Elements

If the iframe page and the parent page share the same origin—meaning identical protocols, domains, and ports—they can directly manipulate each other's DOM via JavaScript.

Example of the parent page accessing the iframe's DOM:

javascript
// In the parent page
var iframeDocument = document.getElementById('myIframe').contentDocument;
var elementInIframe = iframeDocument.getElementById('someElement');
elementInIframe.innerHTML = 'Hello from parent page!';

Example of the iframe accessing the parent page's DOM:

javascript
// In the iframe
var parentDocument = window.parent.document;
var elementInParent = parentDocument.getElementById('someElementInParent');
elementInParent.innerHTML = 'Hello from iframe!';

3. Using JavaScript Callback Functions

In certain scenarios, the parent page can pass functions as global variables or as properties of the iframe window, allowing the iframe to directly invoke these functions for communication.

Example of the parent page providing a callable function for the iframe:

javascript
// In the parent page
function parentFunction(message) {
    console.log('Message from iframe:', message);
}

Example of the iframe calling the parent page's function:

javascript
// In the iframe
window.parent.parentFunction('Hi, parent!');

Considerations and Security Notes:

1. For cross-origin communication, always use postMessage and verify the message origin via event.origin to ensure security.
2. When directly manipulating DOM, be mindful of cross-origin restrictions; this is only possible when pages share the same origin.
3. When using global functions for communication, be cautious of potential naming conflicts and function scope issues.

Through these mechanisms, an iframe page and its parent site can effectively communicate while maintaining security and flexibility. When implementing these communication methods, prioritize security to prevent sensitive information exposure or potential malicious behavior.

For different domains, direct method invocation or access to the iframe's content document is not possible.

You must use Cross-document messaging.

Parent -> Iframe

• For example, in the top window:

javascript
myIframe.contentWindow.postMessage('hello', '*');

• And in the iframe:

javascript
window.onmessage = function(e) {
    if (e.data == 'hello') {
        alert('It works!');
    }
};

Iframe -> Parent

• For example, in the top window:

javascript
window.onmessage = function(e) {
    if (e.data == 'hello') {
        alert('It works!');
    }
};

• And in the iframe:

javascript
window.top.postMessage('hello', '*');