makotom/master.html

## master.html
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>Master</title>

<script>
    window.addEventListener('DOMContentLoaded', function () {
        document.querySelector('#triggerBtn').addEventListener('click', function () {
            const slaveWindow = window.open('slave.html');

            window.addEventListener('message', function (evt) {
                if (evt.source === slaveWindow && evt.origin /* In production, specify valid FQDN for security purposes */) {
                    slaveWindow.postMessage('hoge', '*' /* In production, specify valid FQDN for security purposes */);
                }
            });
        });
    });
</script>

<button id="triggerBtn" type="button">Click me!</button>

## slave.html
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>Slave</title>

<script>
    window.addEventListener('load', function () {
        if (window.opener !== null) {
            window.opener.postMessage('hoge', '*' /* In production, specify FQDN for security purposes */);
        }
    });

    window.addEventListener('message', function (evt) {
        if (evt.source === window.opener && evt.origin /* In production, assert FQDN for security purposes */) {
            document.querySelector('body').appendChild(document.createTextNode(evt.data));
        }
    });
</script>

<p>I'm slave.</p>
	<!doctype html>
	<html lang="en">
	<meta charset="UTF-8">
	<title>Master</title>

	<script>
	window.addEventListener('DOMContentLoaded', function () {
	document.querySelector('#triggerBtn').addEventListener('click', function () {
	const slaveWindow = window.open('slave.html');

	window.addEventListener('message', function (evt) {
	if (evt.source === slaveWindow && evt.origin /* In production, specify valid FQDN for security purposes */) {
	slaveWindow.postMessage('hoge', '' / In production, specify valid FQDN for security purposes */);
	}
	});
	});
	});
	</script>

	<button id="triggerBtn" type="button">Click me!</button>