ilearnjavascript/plainjs - window.postmessage and iframes - 8.html Secret

## plainjs - window.postmessage and iframes - 8.html
<!DOCTYPE html>
<html lang="de">

    <head>
        <meta charset="utf-8">
        <title>iframe</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
        <h1>iframe</h1>
        <button>Trigger postMessage</button>

        <div id="innerContainer"></div>
    </body>

    <script>
        document.querySelector("button").addEventListener("click", function() {
            top.postMessage("message from iframe", 'http://127.0.0.1:8080');
        });

        window.addEventListener("message", receiveMessage, false);

        function receiveMessage(event) {

            if(event.origin === "http://127.0.0.1:8080"
                && event.data === "message from window"
                && event.data.length === 19
                && typeof event.data === 'string') {
                    console.log("event.origin: ", event.origin);
                    console.log("event.data: ", event.data);
                    console.log("event.source: ", event.source);

                    document.getElementById("innerContainer").innerText = `
                    Message from window:
                    event.origin: ${event.origin}
                    event.data: ${event.data}
                    event.source: ${event.source}
                    pathname: ${event.source.location.pathname}

                    // open also console to inspect objects

                `
                }
        }
    </script>

</html>
	<!DOCTYPE html>
	<html lang="de">

	<head>
	<meta charset="utf-8">
	<title>iframe</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>

	<body>
	<h1>iframe</h1>
	<button>Trigger postMessage</button>

	<div id="innerContainer"></div>
	</body>

	<script>
	document.querySelector("button").addEventListener("click", function() {
	top.postMessage("message from iframe", 'http://127.0.0.1:8080');
	});

	window.addEventListener("message", receiveMessage, false);

	function receiveMessage(event) {

	if(event.origin === "http://127.0.0.1:8080"
	&& event.data === "message from window"
	&& event.data.length === 19
	&& typeof event.data === 'string') {
	console.log("event.origin: ", event.origin);
	console.log("event.data: ", event.data);
	console.log("event.source: ", event.source);

	document.getElementById("innerContainer").innerText = `
	Message from window:
	event.origin: ${event.origin}
	event.data: ${event.data}
	event.source: ${event.source}
	pathname: ${event.source.location.pathname}

	// open also console to inspect objects

	`
	}
	}
	</script>

	</html>