postMessage Test - Parent

by wisegorilla

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="//fiddle.jshell.net/arabtornado/emwua6hs/5/show/light/" frameborder="0"></iframe>

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

const x = {
	name: 'islam'
	}
	
window.send = function() {
  var iframe = document.getElementById('jsfiddle-frame').contentWindow;
  var message = document.querySelector('#textOutput').value;

  iframe.postMessage(x, '*');
	
}

console.log(x)

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