Embedding public apps and issue passing data from the parent window

💬 App Building
5

Of course! This is basically just a stripped down version of what our packages do, but with the ability to customize its behavior a bit.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script defer>
    window.addEventListener('message', e => {
      if (e.origin === 'https://toula.retool.com') {
        let frame = document.querySelector('#retool');
        frame?.contentWindow.postMessage(
          {
            type: "PARENT_WINDOW_RESULT",
            result: JSON.stringify(document.querySelector(e.data.selector)),
            id: e.data.id,
            pageName: e.data.pageName
          },
          "*"
        );
      }
    })
  </script>
</head>
<body>
  <div id="test">Hello world</div>
  <iframe id="retool" src="https://toula.retool.com/p/test" frameborder="0" width="100%" height="100%"></iframe>
</body>
</html>

I hope that helps!

2 Likes