JSFiddle - React, Tailwind, and code Playground

by dnprock

HTML

<h1>Controller Window</h1>
<p>
Data: <span id="data">[1,2,3,4]</span>
</p>
<p>
  <button id="send">Send Data</button>
</p>

<iframe id="receiver" src="https://vida.io/embed/9Pst6wmB83BgRZXgx" width="500" height="200">
  <p>Your browser does not support iframes.</p>
</iframe>

JavaScript

// Get the window displayed in the iframe.
	var receiver = document.getElementById('receiver').contentWindow;
  
	// Get a reference to the 'Send Message' button.
	var btn = document.getElementById('send');

	// A function to handle sending messages.
	function sendMessage(e) {
		// Prevent any default browser behaviour.
		e.preventDefault();

		// Send a message with the text 'Hello Treehouse!' to the new window.
		receiver.postMessage(document.getElementById('data').innerHTML, 'https://vida.io');
	}

	// Add an event listener that will execute the sendMessage() function
	// when the send button is clicked.
	btn.addEventListener('click', sendMessage);