cirocosta/iframe.html

## iframe.html
<!DOCTYPE html>
<html>
<head>
	<title>My Iframe</title>
</head>
<body>

<button>Botão</button>

<script type="text/javascript">
	document.querySelector('button').onclick = function () {
		// parent.postMessage("message to be sent", "http://the-website-that-will-receive-the-msg.com")
		parent.postMessage("myevent", "*")
	};
</script>

</body>
</html>

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Index</title>
</head>
<body>

<iframe src="iframe.html" width="300" height="300"></iframe>

<script type="text/javascript">
	var eventMethod = window.addEventListener
			? "addEventListener"
			: "attachEvent";
	var eventer = window[eventMethod];
	var messageEvent = eventMethod === "attachEvent"
		? "onmessage"
		: "message";

	eventer(messageEvent, function (e) {

		// if (e.origin !== 'http://the-trusted-iframe-origin.com') return;

		if (e.data === "myevent" || e.message === "myevent")
			alert('Message from iframe just came!');

		console.log(e);
	});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>My Iframe</title>
	</head>
	<body>

	<button>Botão</button>

	<script type="text/javascript">
	document.querySelector('button').onclick = function () {
	// parent.postMessage("message to be sent", "http://the-website-that-will-receive-the-msg.com")
	parent.postMessage("myevent", "*")
	};
	</script>

	</body>
	</html>