Как создать iframe из фрагмента кода html, который включает тег script

Question

Мне нужно динамически создавать фреймы из фрагмента HTML. Я могу отобразить html, но, похоже, некоторые теги сценария не включены.

Я делаю это в реакции и не нашел документации по наилучшему способу динамического создания iframe. поэтому я создаю элемент в dom, а затем удаляю элемент при размонтировании компонента.

Вот как я создаю iframe (ниже внутри метода, который я вызываю для componentDidMount)

      const iframe = document.createElement("iframe");
      const html = HTMLblock;
      iframe.id = "iframe";
      iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
      document.body.appendChild(iframe);

HTMLblock - это фрагмент html, в котором есть тег сценария. Iframe не рендерится правильно, так как я получаю следующую ошибку в моих devtools - Query variable sumotoken not found

Любое понимание очень ценится!

Answer 1

Попробуйте использовать атрибут srcdoc <iframe>

<iframe id="myframe" srcdoc="My iframe Content <script>console.log('hello')</script>"</iframe>

С вашим JS:

const iframe = document.createElement("iframe");
const html = 'Iframe Content<script>console.log("hello")<\/script>';
iframe.id = "iframe";
iframe.setAttribute('srcdoc', html);
document.body.appendChild(iframe);

Примечание: вы должны экранировать / в </script> с \, иначе это вызовет ошибку.

Мои тесты показывают "привет" в консоли.

Нет IE поддержка через:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/srcdoc