postMessage Test - Frame

by wisegorilla

HTML

<div class="output">
  <textarea id='textOutput' rows="7"></textarea>
  <button onclick="send()">
    Send
  </button>
</div>

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%;
}

JavaScript

var parent = null;
window.send = function() {
  if (parent) {
    var message = document.querySelector('#textOutput').value;
    parent.postMessage(message, '*');
  }
}

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