JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<!doctype html>
<html>
  <head>
    <script type="text/javascript">
      function init() {
        // when a message is received from the page code
        window.onmessage = (event) => {
          if (event.data) {
            console.log("HTML Code Element received a message!", event);
            insertMessage(event.data);
          }
        }
      }
      
      // display received message
      function insertMessage(msg) {
        document.getElementById('demo').innerHTML = msg;
        sendReturnMessage("Message from the HTML Component!");
      }
      
      // send message to the page code
      function sendReturnMessage(msg) {
        window.parent.postMessage(msg, '*');
      }
      
      console.log('iframe init done')

    </script>
  </head>

  <body onload="init();">
  </body>

</html>

JavaScript

(() => {
  window.addEventListener('message', ({ data }) => {
    const { rendererModel } = data || {};
    if (!rendererModel) return;

    console.log('send to wix code', { rendererModel })

    window.parent.postMessage({ rendererModel }, '*');

  });
})();