JSFiddle - React, Tailwind, and code Playground

by strider820

HTML

<div id="iframe_onload" class='test'>
iframe onload
</div>
<div id="first_onload" class='test'>
first script onload
</div>
<div id="first_execute" class='test'>
first script execute
</div>
<div id="second_onload" class='test'>
second script onload
</div>
<div id="second_execute" class='test'>
second script execute
</div>

CSS

.test{
  float: left;
  background-color: red;
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}

.passed{
  background-color: green;
}

JavaScript

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.onload = function() {
	console.log('iframe onload:', iframe.contentWindow.document.readyState);
	document.getElementById('iframe_onload').className += ' passed';
};

iframe.contentWindow.document.open();
iframe.contentWindow.document.write('<html><head></head>' + 
	'<body>' +
  '<div id="div1"></div><script src="//joshnheidi.com/onloadtest.js">' +
  '</' + 'script></body></html>');

iframe.contentWindow.document.getElementsByTagName("script")[0].onload = function() {
	console.log('first script onload:', iframe.contentWindow.document.readyState);
	document.getElementById('first_onload').className += ' passed';
  iframe.onload();
  	iframe.contentWindow.addScript();
}
iframe.contentWindow.document.close();