JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id = "Preview"></iframe>
<button onclick = "changeSRCtoLocal()">Local2HTTP (1)</button>
<button onclick = "changeSRCtoHTTP()">HTTP2Local (2)</button>
<button onclick = "changeSRCtoHTTPother()">The other way (3)</button>
<br>
<span>click at the button to change html content of iframe</span>
<script>
function changeSRCtoLocal(){
  document.getElementById('Preview').src = "https://jsfiddle.net/";
}
function changeSRCtoHTTP(){
  var iframe = document.getElementById('Preview'),
  iframedoc = iframe.contentDocument || iframe.contentWindow.document;
	iframedoc.body.innerHTML = "Why??"
}
function changeSRCtoHTTPother(){
  var iframe = document.getElementById('Preview');
  iframe.src = "data:text/html;charset=utf-8,<html>Why am I working??</html>"
}
</script>

JavaScript

document.ready = (
function(){

	var iframe = document.getElementById('Preview'),
  iframedoc = iframe.contentDocument || iframe.contentWindow.document;
	iframedoc.body.innerHTML = "Why??"
}
)();