Я пишу HTML-редактор в браузере, где пользователи пишут HTML-код, который отправляется (при каждом нажатии клавиши) в iframe для предварительного просмотра.Вот код, который у меня сейчас есть:
onCodeChange(html) {
iframe.contentDocument.open();
iframe.contentDocument.write(html);
iframe.contentDocument.close();
}
Проблема возникает, когда пользователи пытаются добавить <script> теги с const в них:
<!doctype html>
<html>
<body>
<script>
const a = 42;
</script>
</body>
</html>
Когда пользователь вводитв ... const a = 4 ... все в порядке (первоначальное объявление a как 4), но когда они заканчивают набирать ... const a = 42 ... (повторное объявление a как 42), возникает ошибка:
Uncaught SyntaxError: Идентификатор 'a' уже объявлен
Я думаю, что это происходит потому, что контекст JavaScript остается прежним, даже если документ переписан.
Я попытался использовать srcdoc:
onCodeChange(html) {
iframe.srcdoc = html;
}
. Это работает, но вызывает мерцание iframe (я предполагаю, что он выгружает и загружает iframe), и я не хочу, чтобы у пользователей были судороги ...
В настоящее время я думаю о том, чтобы иметь два iframe (один поверх другого), использовать srcdoc и поменять их z-index при загрузке.Это очень странно, но может исправить мерцание.
Могу ли я что-нибудь еще сделать?