Как я могу отобразить полностью связанное приложение для реагирования внутри iframe?

Question

Общий обзор:

Я создаю SDK, чтобы люди могли встраивать собственные инструменты в существующее приложение. Эти настраиваемые инструменты будут размещены в iframe по соображениям безопасности. Они должны иметь возможность получать данные из родительского окна и передавать изменения обратно родительскому окну, когда соответствующие данные обрабатываются в iframe.

Как мне go получить доступ к встроенным исполняемым файлам из настраиваемый инструмент в моем родительском приложении, чтобы отображать их в iframe? С радостью предоставлю фрагменты кода, если они будут полезны, но больше ищем начального направления.

Спасибо!

Answer 1

Элемент React ниже отображается в iframe, который должен включать react.production.min.js и react-dom.production.min.js вместе с вашим приложением React, преобразованным в Babel:

ReactDOM.render(
  (<h1>Hello!</h1>),
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Обратите внимание, что вызов ReactDOM отличается, когда он фактически включен в iframe, потому что он был перенесен из JSX в обычный ES6, но в остальном он в значительной степени копирует -паста:

Chrome DevTools.