Running into trouble with contentWindow...

Question

To give a bit of some background, I am trying to make a code editor because I want to make something that works offline, but most ides are blocked because it was loaned from the school. I have already found success in creating the parts that take input, and now need to find a way to add the a preview feature. One way that I have noticed was to use the contentWindow property for iFrames. Only problem is that I'm getting some rather weird and unexpected results... Created a separate code that follows nearly the same principle and did not get the same error.

The only difference between the two is the overall code size and location of the js code.
Normally, I'd put the js code in a script tag in the head or body tag, but for some reason code playground prematurely closes off the script tag for reasons unknown to me.

The JavaScript console says that there is a JavaScript SyntaxError: Unexpected end of input
Line: 20, but that doesn't make much sense since the function in which I use the contentWindow property has not been called at all when I first run it. The function is supposed to be called when I push a button not immediately. What makes it even worse is that I can see my js code above the rest of the site...

Overall I'm at a loss.
Can anyone offer advice on alternatives or spot my code for some simple mistake?
I could really use a fresh pair of eyes.
Thanks.

Code with error:
https://code.sololearn.com/WEVWtaOaxBg4/#js

Smaller scale version that actually works:
https://code.sololearn.com/WRa0fTca7Sz1/#html

Answer 1

Try this

function preview() {
var site = document.getElementById("site").contentWindow.document;

site.open();
var style = document.createElement("style");
style.innerText = css.val();
site.head.append(style);

site.body.innerHTML = body.value;
var script = document.createElement("script");
script.innerHTML = js.val();
site.body.append(script);

site.close();
}

i didnt test it but it should work

Answer 2

Nico Ruder
Thnx Man!

I just finished debugging the code.
The problem was that I forgot to add escape sequences...
Both your code and the patch do work though.
In all honesty yours seems to be more efficient.

Answer 3

Update: I found the source of my problems when I decided to make a much smaller scale version of what I was planning. It seems that the code playground cannot distinguish between an end tag and a string containing an end tag.

Can anyone else verify this?

Larger scale version f the smaller scale version that works:
https://code.sololearn.com/W34qz7I709Ih/#html

Answer 4

Im sry I said something wrong it isnt depricated but it is more used for testing

Sry

Answer 5

Nico Ruder
It's cool man.
Your way is still likely to be much more practical and efficient way to do it.

Answer 6

Yeah and a little bit smaller

I would recommend my code because write() and writeln() are deprecated and shoulnt be used anymore

Answer 7

Nico Ruder
100% agree with you.
Didn't know that it was deprecated. Thanks for the info Nico!

Answer 8

No problem

Answer 9

Thank you