Как можно сделать простой скрипт?
Например: три колонки где можно вводить код, html, css, js и четвертая колонка, где выводится результат.
Для тестирования html, css, js, подобно тому, что есть на сайтах codepen.io/pen и jsfiddle.net?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКак можно сделать простой скрипт?
Например: три колонки где можно вводить код, html, css, js и четвертая колонка, где выводится результат.
Для тестирования html, css, js, подобно тому, что есть на сайтах codepen.io/pen и jsfiddle.net?
В целом реализация не требует никакой серверной части. С сервера стоит только загружать предварительный контент в нужные элементы, а также сохранять их при необходимости. В остальном в сервере необходимости нет.
Уже была рекомендация использовать 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;
}
});
});
window.onload=function () { console.log(1) }
- у меня именно для этого адрес iframe'а меняется.
Думаю, простейший вариант такой, причём без сервера (и даже без 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.
Используйте iframe для 4го окна. Не уверен, что это будет работать, но я бы делал так:
$script = $('textarea.javascript');
$style = $('textarea.css');
$html = $('textarea.html');
$('iframe body).append($html);
$('iframe script).append($script);
$('iframe style).append($style);
onload
внутри фрейма работать не будет. А ещё у тебя опечатки в ответе.
Структура примерно такая
<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
'овый вариант. Но как базис для фидла, думаю, вполне сойдет