postMessage Test - Parent

by Tushar Thakare

HTML

<div>
  <h3>
  Source
  </h3>
  <div class="output">
    <textarea id='textOutput' rows="7">Enter text and send...</textarea>
    <button onclick="send()">
      Send
    </button>
  </div>
</div>
<hr>
<h3>
  Target Frame
  </h3>
<iframe width="100%" height="300" id="jsfiddle-frame" src="https://speedgod.w3spaces.com/iframe-copy.html" frameborder="0"></iframe>


<script>
window.send = function() {
  var iframe = document.getElementById('jsfiddle-frame').contentWindow;
  var message = document.querySelector('#textOutput').value;
  iframe.postMessage(message, '*');
}

window.addEventListener('message', function(event) {
  document.querySelector('#textOutput').value = event.data;
}, false);

</script>

CSS

body {
  margin: 20px auto;
  line-height: 1.6;
  padding: 0 20px;
  font-family: Lato, Arial, sans-serif !important;
  font-size: 12px;
  color: #444444;
}

.input {
  width: 50%;
  margin: 5px;
}

.input input {
  width: 70%;
}

.output {
  width: 50%;
  margin: 5px;
}

.output textarea {
  width: 100%;
}