JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<form id="the-form" action="/">
					<input type="text" id="my-message" value="Your message">
					<input type="submit" value="postMessage">
				</form>


<iframe id="da-iframe" src="https://robertnyman.com/html5/postMessage/postMessageTarget.html"></iframe>

JavaScript

window.onload = function () {
	var iframeWin = document.getElementById("da-iframe").contentWindow,
		form = document.getElementById("the-form"),
		myMessage = document.getElementById("my-message");

	myMessage.select();

	form.onsubmit = function () {
		iframeWin.postMessage(myMessage.value, "https://robertnyman.com");
		return false;
	};
};



function displayMessage (evt) {
	var message;


		message = "I got " + evt.data;

	document.getElementById("received-message").innerHTML = message;
}

if (window.addEventListener) {
	// For standards-compliant web browsers
	window.addEventListener("message", displayMessage, false);
}
else {
	window.attachEvent("onmessage", displayMessage);
}