Sending messages from child iframe to parent webpage
<!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>
<!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>