Страницы

Поиск по вопросам

понедельник, 1 октября 2018 г.

Выполнить html, css, js написанные в textarea

Как можно сделать простой скрипт?
Например: три колонки где можно вводить код, html, css, js и четвертая колонка, где выводится результат.
Для тестирования html, css, js, подобно тому, что есть на сайтах codepen.io/pen и jsfiddle.net?


Ответ

В целом реализация не требует никакой серверной части. С сервера стоит только загружать предварительный контент в нужные элементы, а также сохранять их при необходимости. В остальном в сервере необходимости нет.
Уже была рекомендация использовать iFrame.
Вот мой пример, который делал когда-то для своих задач http://jsfiddle.net/r1o8n298/1/
HTML:

HTML

CSS

JavaScript




JS:
var widgetTpl = "" + "" + "" + "" + "Widget" + "<\/head>" + "" + "<\/body>" + "<\/html>"; var outputFrame = document.querySelector("#output"); var outputDoc = outputFrame.contentDocument;
var htmlEditor = document.querySelector("#html"); var cssEditor = document.querySelector("#css"); var jsEditor = document.querySelector("#js"); var editors = [htmlEditor, cssEditor, jsEditor];
var prepareSource = function () { var src = widgetTpl; var htmlStr = htmlEditor.value; var cssStr = "