JSFiddle - React, Tailwind, and code Playground

by flek

HTML

<iframe id="iframe"></iframe>
<script></script>

JavaScript

const iframe = document.querySelector('#iframe')

const srcdoc = `
<!doctype html>
<html>
<head>
</head>
<body>
  <div id="global" style="color:blue;"></div>
  <div id="local" style="color:blue;"></div>
	<script>
    (function() {
      window.addEventListener('message', function(event) {
        let { script } = event.data;

        if (script) {
          eval(script);
        }
      }, false);
    }).call(this);
  </script>
</body>
</html>`;

iframe.setAttribute('srcdoc', srcdoc);

const jsCode = `
X = 'x';
console.log('global', window.X, X);
(function(){
	console.log('local', window.X, X);
})()`;

const evalIFrame = (script) =>
  iframe.contentWindow.postMessage({ script }, '*');
  
/* evalIFrame(jsCode)*/
eval.call(this, jsCode);