Estoy creando un IDE de HTML en línea simple donde los estudiantes pueden escribir HTML en un editor de codemirror y luego, cuando se hace clic en un botón, el HTML se coloca en un iframe para representar la página.
Mi código en cuestión:
function runit() { var prog = myCodeMirror.getValue(); var mypre = document.getElementById("output"); mypre.contentDocument.body.outerHTML = prog; } prog es el html del editor, mypre es el iframe.
Todo el html colocado dentro de las etiquetas <body> se ejecuta correctamente en el iframe. Todo el código css colocado dentro de las etiquetas <style> se ejecuta correctamente en el iframe. Sin embargo, cualquier javascript colocado dentro de las etiquetas <script> no se ejecuta en el iframe.
¿Cómo puedo hacer que el contenido de la etiqueta <script> se ejecute correctamente en el iframe?
Esto puede ayudar:
const runit = () => document.getElementById("output").srcdoc = myCodeMirror.getValue(); Usamos la propiedad srcdoc para cambiar el contenido en el iframe como HTML