Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to send a cross-document message with HTML?
Cross-document messaging allows secure communication between different browsing contexts (windows, iframes, or tabs) using the postMessage() API, even when they have different origins.
Syntax
targetWindow.postMessage(message, targetOrigin);
Parameters
- message ? The data to send (string, object, or any serializable value)
- targetOrigin ? The origin URL of the target window (use "*" for any origin, but specify for security)
Example: Sending Message from Parent to Iframe
Parent window HTML:
<!DOCTYPE html>
<html>
<body>
<iframe id="myIframe" src="/child.html" width="400" height="200"></iframe>
<button onclick="sendMessage()">Send Message to Iframe</button>
<script>
function sendMessage() {
var iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from parent!', '*');
console.log('Message sent to iframe');
}
</script>
</body>
</html>
Child iframe HTML (child.html):
<!DOCTYPE html>
<html>
<body>
<p id="message">Waiting for message...</p>
<script>
window.addEventListener('message', function(event) {
console.log('Received message:', event.data);
console.log('From origin:', event.origin);
document.getElementById('message').textContent = event.data;
});
</script>
</body>
</html>
Example: Two-Way Communication
Parent sends message and receives response:
<!DOCTYPE html>
<html>
<body>
<iframe id="myIframe" src="/child.html" width="400" height="200"></iframe>
<button onclick="sendMessage()">Send Message</button>
<p id="response"></p>
<script>
// Send message to iframe
function sendMessage() {
var iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from parent!', '*');
}
// Listen for response from iframe
window.addEventListener('message', function(event) {
console.log('Parent received:', event.data);
document.getElementById('response').textContent = 'Response: ' + event.data;
});
</script>
</body>
</html>
Child iframe responds back:
<!DOCTYPE html>
<html>
<body>
<p id="message">Waiting for message...</p>
<script>
window.addEventListener('message', function(event) {
console.log('Child received:', event.data);
document.getElementById('message').textContent = event.data;
// Send response back to parent
event.source.postMessage('Message received by iframe!', event.origin);
});
</script>
</body>
</html>
Security Considerations
Always verify the origin for security:
window.addEventListener('message', function(event) {
// Verify trusted origin
if (event.origin !== 'https://trusted-domain.com') {
console.log('Untrusted origin:', event.origin);
return;
}
// Process the message
console.log('Trusted message:', event.data);
});
Common Use Cases
- Communication between parent window and embedded iframes
- Popup windows communicating with their opener
- Cross-origin widget integration
- Secure payment processing frames
Conclusion
The postMessage() API enables secure cross-document communication between different browsing contexts. Always specify target origins and verify sender origins for security.
Updated on: 2026-03-15T23:18:59+05:30
246 Views
Advertisements