If you want to establish communication between two <iframe> elements, you can utilize the postMessage method.
Whenever a message is received, a message event is triggered. This allows you to create an observable using fromEvent, if desired.
Here's a simple example scenario:
Suppose there are two HTML files - ping.html and pong.html. Both are hosted on http://localhost:8000.
ping.html sends the initial message to pong.html- Upon receiving the message,
pong.html displays '👆' and replies back
- When
ping.html receives this response, it displays '👇' and sends another message in return
- And so forth...
Below is the content of ping.html:
<html>
<head>
<meta charset="utf8">
</head>
<body>
<div id="msg_from_pong"></div>
<iframe id="pong" src="pong.html" style="width:100%;border-style:none"></iframe>
<script>
// Wait for the pong iframe to load
document.querySelector('#pong').addEventListener('load', ({target}) => {
target.contentWindow.postMessage('initial ping', 'http://localhost:8000');
});
// Listen for messages from the pong iframe
window.addEventListener('message', ({data, source, origin}) => {
if (data !== 'pong') {
return;
}
document.querySelector('#msg_from_pong')
.appendChild(document.createTextNode('👇'));
setTimeout(() => {
source.postMessage('ping', origin);
}, 300);
});
</script>
</body>
</html>
Here is the content of pong.html:
<html>
<body>
<div id="msg_from_ping"></div>
<script>
window.addEventListener('message', ({data, source, origin}) => {
document.querySelector('#msg_from_ping')
.appendChild(document.createTextNode('👆'));
setTimeout(() => {
source.postMessage('pong', origin);
}, 300);
});
</script>
</body>
</html>
Watch the complete interaction here:
https://i.stack.imgur.com/iP06A.gif