JSFiddle - React, Tailwind, and code Playground

by dj19910501

HTML

<iframe height='500' width='1000' src='https://hive9.my.workfront.com'>

</iframe>
<div>
<button>
Manual trigger 
</button>
</div>
<div id='logs'>

</div>

CSS

div > div {
  margin-bottom: 10px;
}

JavaScript

window.addEventListener('message', function(event) {
	var $div = $("<div>").text(JSON.stringify(event.data) + event.origin);
  $("#logs").append($div);
}, false);

$(function(){
  $("button").on("click", function(){
   window.postMessage({ data: 'This is a manual test ' + new Date()}, '*');
   $("iframe")[0].contentWindow.postMessage({ data: 'This is a manual test inside iframe ' + new Date()}, '*');
  });
})

/* ============ Copy paste below code to the browser console.

window.addEventListener('message', function(event) {
	if(event.data && event.data.type === 'requestSubmitted'){
  	alert("event captured.");
  }
 	console.log(JSON.stringify(event.data) + event.origin);
}, false);

*/

/* ============ Manually trigger a submitted event.

window.postMessage({ data: {type: 'requestSubmitted', newIssueID: '1234567890'}}, '*');

*/