alanmcginnis
12/21/2019 - 1:45 AM

Sending messages from child iframe to parent webpage

Sending messages from child iframe to parent webpage

iframe.html
content_copyfile_download
<!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
content_copyfile_download
<!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>