JavaScript within <script> tags are not being executed in an iframe

Question

I am building a simple online HTML IDE where students can type HTML into a codemirror editor and then when a button is clicked, the HTML is placed in an iframe to render the page.

My code in question:

function runit() { 
   var prog = myCodeMirror.getValue(); 
   var mypre = document.getElementById("output");
   mypre.contentDocument.body.outerHTML = prog; 
 
}

prog is the html from the editor, mypre is the iframe.

All html placed within <body> tags is correctly executed in the iframe. All css code placed within <style> tags is correctly executed in the iframe. However, any javascript placed within <script> tags is not executed in the iframe.

How can I get <script> tag contents to be correctly executed in the iframe?

Do this and this help?

The Amateur Coder
– The Amateur Coder

2022-01-21 06:49:49 +00:00
Commented Jan 21, 2022 at 6:49 — The Amateur Coder
– The Amateur Coder, Commented Jan 21, 2022 at 6:49

AquaPI · Accepted Answer · 2022-01-21 06:57:59Z

1

This may help:

const runit = () => document.getElementById("output").srcdoc = myCodeMirror.getValue();

We use the property srcdoc to change the content in the iframe as HTML

answered Jan 21, 2022 at 6:57

AquaPI

1161 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AquaPI Over a year ago

I recommend u using let instead of var and if the variable is not used two or more times you don't need to declare it and just use its value instead :)

Collectives™ on Stack Overflow

JavaScript within <script> tags are not being executed in an iframe

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related