Here's a basic HTML editor:
textarea,iframe { width: 400px; height: 300px;}
<textarea></textarea><iframe></iframe>
var textarea = document.querySelector('textarea');function preview() { var iframeDoc = document.querySelector('iframe').contentDocument; iframeDoc.open(); iframeDoc.write(textarea.value); iframeDoc.close();}textarea.addEventListener('input', preview);
It updates the HTML and CSS you put in the textarea
, but you can't use JavaScript const
or let
variables as it throws the following syntax error as soon as you edit the inserted code:
Identifier * has already been declared
To see what I mean, insert the following sample code in the textarea
:
<!doctype html><html lang="en"><head><title>Sample Code</title></head><body><p>Hello!</p><script> const p = document.querySelector('p'); p.style.color = 'blue';</script></body></html>
Now change Hello!
to Hello, world!
, or blue
to red
.
What's the solution so the user can keep editing the code without getting that error?
Update
Inspired by svarlitskiy's answer, I finally decided to replace the iframe
with a newly-created one:
function preview() { var iframe = document.createElement('iframe'); document.querySelector('iframe').replaceWith(iframe); var iframeDoc = iframe.contentDocument; iframeDoc.write(textarea.value); iframeDoc.close();}