Skip to content

Instantly share code, notes, and snippets.

@AnsonT

AnsonT/frame.html

Created September 11, 2014 03:48
Show Gist options
  • Save AnsonT/b41d71f4761b48c4a468 to your computer and use it in GitHub Desktop.
Save AnsonT/b41d71f4761b48c4a468 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 MessageChannel
Raw
frame.html
<!DOCTYPE html>
<html>
<script type="text/javascript">
function click1() {
console.log("click");
window.parentPort.postMessage("Click Message from Frame");
}
function onParentMessage(e) {
console.log("In Frame");
console.log(e);
}
function load() {
console.log("load frame");
channel = new MessageChannel();
channel.port1.onmessage = onParentMessage
window.parentPort = channel.port1;
window.parent.postMessage("channel", "*", [channel.port2]);
}
</script>
<body onload="load()">
<button onclick="click1()">Send To Parent</button>
<h1>Frame</h1>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<script type="text/javascript">
function click2() {
console.log("click");
window.framePort.postMessage("Click Message From Parent");
}
function load() {
console.log("load index");
window.addEventListener("message", onMessage, false);
window.postMessage("test message", "*");
}
function onFrameMessage(e) {
console.log("In Parent");
console.log(e);
}
function onMessage(e) {
console.log(e);
if (e.data === "channel") {
console.log(e.ports[0]);
window.framePort = e.ports[0]
window.framePort.onmessage = onFrameMessage
}
}
</script>
<body onload="load()">
<button onclick="click2()">Send To Frame</button>
<iframe src="frame.html"></iframe>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment