AnsonT/frame.html

## 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>

## 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>
	<!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>