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
HTML5 Cross Browser iframe post message - child to parent?
HTML5's postMessage API enables secure communication between an iframe and its parent window across different domains. This is essential for cross-origin iframe communication where traditional methods fail due to browser security policies.
Parent Window Setup
The parent window needs to set up an event listener to receive messages from the child iframe. Here's the cross-browser compatible approach:
<!DOCTYPE html>
<html>
<head>
<title>Parent Window</title>
</head>
<body>
<h2>Parent Window</h2>
<div id="messages"></div>
<iframe id="childFrame" src="child.html" width="400" height="300"></iframe>
<script>
// Cross-browser event listener setup
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
// Listen to messages from child iframe
eventer(messageEvent, function(e) {
var key = e.message ? "message" : "data";
var data = e[key];
document.getElementById("messages").innerHTML +=
"<p>Received from child: " + data + "</p>";
}, false);
</script>
</body>
</html>
Child Iframe Code
The child iframe sends messages to the parent using parent.postMessage():
<!DOCTYPE html>
<html>
<head>
<title>Child Iframe</title>
</head>
<body>
<h3>Child Iframe</h3>
<button onclick="sendMessage()">Send Message to Parent</button>
<div id="counter">Messages sent: 0</div>
<script>
let messageCount = 0;
function sendMessage() {
messageCount++;
var message = "Hello from child iframe! Message #" + messageCount;
// Send message to parent window
parent.postMessage(message, "*");
document.getElementById("counter").textContent =
"Messages sent: " + messageCount;
}
// Auto-send message every 3 seconds
setInterval(sendMessage, 3000);
</script>
</body>
</html>
How It Works
The communication process involves:
-
Cross-browser compatibility: Uses
addEventListenerfor modern browsers andattachEventfor older IE versions - Event handling: Parent listens for "message" events from the child iframe
-
Data extraction: Handles different event object properties across browsers (
datavsmessage) - Security: Uses "*" as target origin for simplicity, but specify exact domains in production
Security Considerations
For production use, always specify the target origin instead of using "*":
// In child iframe - specify parent's origin
parent.postMessage(message, "https://example.com");
// In parent window - verify sender's origin
eventer(messageEvent, function(e) {
if (e.origin !== "https://trusted-domain.com") {
return; // Ignore untrusted messages
}
// Process the message...
}, false);
Browser Compatibility
| Feature | Modern Browsers | Internet Explorer |
|---|---|---|
| Event Method | addEventListener |
attachEvent |
| Event Name | "message" |
"onmessage" |
| Data Property | e.data |
e.message |
Conclusion
HTML5 postMessage provides secure cross-origin communication between parent windows and child iframes. The cross-browser approach ensures compatibility across all modern browsers and legacy Internet Explorer versions.
235 Views
