Каким образом лучше всего реализовать отображения результата написания кода в редакторе на сайте?

Question

[Никита]

Я хочу реализовать отображения результата написания html + css в редакторе на сайте(как это реализован на codepen, jsfiddle и т.д.), каким образом это лучше будет всего сделать? Как я понимаю: лучшим вариантом будет отдать весь код на сервер, сгенерировать файлы и указать ссылку на html файл iframe'у?

Answer 1

[Илья Рупасов]

const iframe = document.createElement('iframe');
document.body.append(iframe);

iframe.contentDocument.body.append(document.createElement('div'));
iframe.contentDocument.body.querySelector('div').innerHTML = '...код...'

Comments

[Никита]

Спасибо за ответ. Я пытался сделать в таком виде, но возникала проблема, что атрибут style из iframe влиял на стили всей страницы. Подскажите, пожалуйста, как это можно исправить?

[Никита]

Никита, криво написал комментарий, прошу прощения, сейчас исправил.

[Илья Рупасов]

Никита, iframe - это полноценный документ, внутри создавайте тэг style - туда стили

[Никита]

Илья, я так и делаю, но стили тега style влияют и на элемента самого сайта.

[Илья Рупасов]

Никита, ну значит что-то не так делаете: https://jsfiddle.net/aukwgLvq/