Skip to content

Instantly share code, notes, and snippets.

@KulkarniSameer

KulkarniSameer/app1.html

Created February 23, 2020 17:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save KulkarniSameer/ca8ee4f906f65e097409e0be11f110f1 to your computer and use it in GitHub Desktop.
Save KulkarniSameer/ca8ee4f906f65e097409e0be11f110f1 to your computer and use it in GitHub Desktop.
Download ZIP
Sample gist to demonstrate cross-origin communication. It has 3 app: parent, app1, app2. Assumptions- Parent app is running on localhost:8080. App1 is loaded in Parent app via iframe and is running on localhost:8081. App2 is spawned from parent app, it runs in a separate tab/window and is running on localhost:8082.
Raw
app1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>App 1</title>
</head>
<body>
<h1>App 1</h1>
<script>
// add an appropriate event listener
window.addEventListener("message", receiveMessage);
function receiveMessage(event) {
if (event.origin !== "http://localhost:8080") return;
console.log(`App1: ${event.data}`);
event.source.postMessage("app1 ack", "http://localhost:8080");
}
</script>
</body>
</html>
Raw
app2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>App 2</title>
</head>
<body>
<h1>App 2</h1>
<script>
// add an appropriate event listener
window.addEventListener("message", receiveMessage);
function receiveMessage(event) {
if (event.origin !== "http://localhost:8080") return;
console.log(`App2: ${event.data}`);
event.source.postMessage("app2 ack", "http://localhost:8080");
}
</script>
</body>
</html>
Raw
parent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parent App</title>
</head>
<body>
<h1>Parent App</h1>
<iframe id="app1" src="http://localhost:8081/" frameborder="0"></iframe>
<script>
const targetOrigins = [
"http://localhost:8080",
"http://localhost:8081",
"http://localhost:8082"
];
// add an appropriate event listener
window.addEventListener("message", receiveMessage);
function receiveMessage(event) {
if (targetOrigins.indexOf(event.origin) === -1) return;
console.log(`Parent: ${event.data}`);
}
const app1 = document.getElementById("app1").contentWindow;
const app2 = window.open("http://localhost:8082/", "app2", []);
setInterval(() => {
[window, app1, app2].forEach((target, index) => {
target.postMessage(
"notification via post message",
targetOrigins[index]
);
});
}, 5000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment