32

Как можно сделать простой скрипт?

Например: три колонки где можно вводить код, html, css, js и четвертая колонка, где выводится результат.

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

1
  • 1
    А вы не пробовали сами посмотреть как устроен jsfiddle? ;) 29 сен 2015 в 17:55

4 ответа 4

23
+50

В целом реализация не требует никакой серверной части. С сервера стоит только загружать предварительный контент в нужные элементы, а также сохранять их при необходимости. В остальном в сервере необходимости нет.

Уже была рекомендация использовать iFrame.

Вот мой пример, который делал когда-то для своих задач http://jsfiddle.net/r1o8n298/1/

HTML:

<div>
    <h1>HTML</h1>
    <textarea id="html"></textarea>
</div>
<div>
    <h1>CSS</h1>
    <textarea id="css"></textarea>
</div>
<div>
    <h1>JavaScript</h1>
    <textarea id="js"></textarea>
</div>

JS:

var widgetTpl = "<!DOCTYPE html>" +
    "<html>" +
    "<head>" +
    "<meta charset=\"utf-8\">" +
    "<title>Widget</title>" +
    "<\/head>" +
    "<body>" +
    "<\/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 = "<style>" + cssEditor.value + "<\/style>";
    var jsStr = "<script>" + jsEditor.value + "<\/script>";

    src = src.replace("<\/head>", cssStr + "<\/head>");
    src = src.replace("<\/head>", jsStr + "<\/head>");
    src = src.replace("<\/body>", htmlStr + "<\/body>");
    return src;
}

var render = function (source) {
    outputDoc.open();
    outputDoc.write(source);
    outputDoc.close();
}
var lastCode = prepareSource();
render(lastCode);
editors.forEach(function (editor) {
    editor.addEventListener("keyup", function () {
        var source = prepareSource();
        if (lastCode !== source) {
            render(source);
            lastCode = source;
        }
    });
});
5
  • Событие загрузки документа нельзя использовать в этом варианте. Такой код не сработает: window.onload=function () { console.log(1) } - у меня именно для этого адрес iframe'а меняется.
    – Qwertiy
    30 сен 2015 в 7:34
  • @Aries В вашем пример почему-то не работает js и с кнопкой показа результата, на мой взгляд более удобно.
    – user185447
    1 окт 2015 в 11:51
  • @Muson со скриптом, там опечатка была: отсутствовал закрывающий тег. По поводу кнопки - зависит от задачи. В моем случае была необходимость реализации реалтайм обновления. Но доработка примера для клика по кнопке не составляет труда в целом.
    – Aries
    1 окт 2015 в 12:11
  • @Aries Можешь показать пример, как доделать кнопочку для вывода результата.
    – user185447
    1 окт 2015 в 18:37
  • @Muson, не буду приводить листинг кода сюда, вот готовый пример с кнопкой jsfiddle.net/r1o8n298/4
    – Aries
    2 окт 2015 в 5:05
18

Думаю, простейший вариант такой, причём без сервера (и даже без jQuery!):

document.getElementById("run").addEventListener('click', function(e) {
  function prepare(content) {
    return "document.write('" +
        content
          .replace(/[\\']/g, "\\$&").replace(/\n/g, "\\n").replace(/<\/script/g, "<\\/script")
          .replace(/%/g, "%25").replace(/#/g, "%23") +
      "');";
  }
  
  document.getElementById("res").src = "data:text/html,<!doctype html><title>Demo</title><script>" + 
    prepare("<style>" + document.getElementById("css").value + "</style>") +
    prepare(document.getElementById("html").value) +
    prepare("<script>" + document.getElementById("js").value + "<\/script>") +
    "<\/script>";
});
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

section {
  float: left;
  width: 50%;
  height: 50%;
}

textarea, iframe {
  height: 100%;
  width: 100%;
  resize: none;
  border: 1px solid silver;
}

#run {
  position: fixed;
  right: 50%;
  bottom: 50%;
}
<section><textarea id=html></textarea></section>
<section><textarea id=css></textarea></section>
<section><textarea id=js></textarea></section>
<section><iframe id=res src=about:blank></iframe></section>
<button id=run>Run</button>

Работает в Хромиумах, FF и Опере 12.
А вот в IE не работает. Совсем. И в Edge. Так и не научились открывать страницу по data-uri.

5
  • Всё таки с фреймом проще) Полностью согласен 29 сен 2015 в 19:26
  • @Qwertiy Ваш скрипт работает, только есть один минус, когда вставляю 'css' код, скрипт перестает работать.
    – user185447
    1 окт 2015 в 11:36
  • @Muson, у тебя # в css... Сейчас исправлю.
    – Qwertiy
    1 окт 2015 в 15:24
  • @Muson, готово.
    – Qwertiy
    1 окт 2015 в 15:28
  • Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
    – Qwertiy
    27 окт 2017 в 15:31
9

Используйте iframe для 4го окна. Не уверен, что это будет работать, но я бы делал так:

$script = $('textarea.javascript');
$style = $('textarea.css');
$html = $('textarea.html');
$('iframe body).append($html);
$('iframe script).append($script);
$('iframe style).append($style);
3
  • Можете объяснить более подробно
    – user185447
    29 сен 2015 в 17:56
  • @Muson, легче лёгкого. С каждого окна берём текст и формируем html страницу, которую затем загружаем в iframe(в четвёртое окно). Результирующая HTML страница обязательно состоит из HEAD, куда мы запихиваем текст из окна CSS, также она включает в себя BODY, в который мы запихиваем текст из окна HTML и наконец под BODY вставляем текст из окна JS. Кажется так.
    – StasHappy
    29 сен 2015 в 18:49
  • onload внутри фрейма работать не будет. А ещё у тебя опечатки в ответе.
    – Qwertiy
    2 окт 2015 в 9:17
3

Структура примерно такая

<div id='usercode' style='display : inline-block'>
    <textarea id='html'></textarea>
    <textarea id='css'></textarea>
    <textarea id='js'></textarea>
</div>
<div id='result' style='display : inline-block'></div>

После события onkeyup в одном из textarea Вы просто вызываете функцию, которая коллекционирует данные с Ваших textarea по id:

var html = $('#html').val(); //и т.д

После чего, генерируете переменную/объект которая будет помещать в себе все данные для результата и в конце просто в блок выводите всё с помощью ('#result').html(page_data);

ОБНОВЛЕНИЕ 1

Написал такую структуру и всё работает:

 function serializeBox(){
        var page = "<style>" + $('#css').val() + "<\/style><script>" + $('#js').val() + "<\/script>" + $('#html').val();
        $('#frame').html(page);
    }
 div div{
        vertical-align: top;
    }
    div{
        padding : 10px;
        margin : 10px;
    }

    #frame{
        border: 1px solid silver;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: inline-block">
    <div>
        <textarea id="html" rows="10" cols="40"></textarea>
    </div>
    <div>
        <textarea id="css" rows="10" cols="40"></textarea>
    </div>
    <div>
        <textarea id="js" rows="10" cols="40"></textarea>
    </div>
    <div>
        <button onclick="serializeBox()">Run</button>
    </div>
</div><div style="display: inline-block; vertical-align: top" id="frame">

</div>

Да, не iframe'овый вариант. Но как базис для фидла, думаю, вполне сойдет

4
  • 2
    Не годится - скрипты будут выполняться в рамках твоей страницы, а не той разметки, которую указал пользователь.
    – Qwertiy
    29 сен 2015 в 18:52
  • Сейчас как раз тестирую всё это. 29 сен 2015 в 18:56
  • @saturn, а конкатенация строчек?) 29 сен 2015 в 19:19
  • @Qwertiy, но как база, может сойти 1 окт 2015 в 10:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.