How can I make a simple script?

For example: three columns where you can enter the code, html , css , js and the fourth column, where the result is displayed.

For testing html , css , js , similar to what is on the sites codepen.io/pen and jsfiddle.net ?

  • one
    And you did not try to see how jsfiddle works? ;) - Dmitriy Simushev

4 answers 4

In general, the implementation does not require any server side. From the server it is only necessary to load the preliminary content into the necessary elements, and also to save them if necessary. The rest of the server is not necessary.

There was already a recommendation to use iFrame.

Here is my example that I once did for my tasks 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; } }); });
  • The document load event cannot be used with this option. This code will not work: window.onload=function () { console.log(1) } - for me, the address of the iframe is changed for this. - Qwertiy ♦
  • @Aries In your example, for some reason, js does not work and with the result display button, in my opinion it is more convenient. - user185447
  • @Muson with the script, there was a typo: there was no closing tag. As for the button, it depends on the task. In my case, there was a need to implement a real-time update. But finalizing the example for clicking on a button is not difficult in general. - Aries
  • Hmm .. In the corrected version of onload works, I was wrong. Keep the plus sign :) And thanks for the way. - Qwertiy ♦
  • @Aries You can show an example of how to finish a button to display the result. - user185447

I think the simplest option is this, and without a server (and even without 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>

Works in Chromium, FF and Opera 12.
But in IE does not work. Totally. And in the edge. So they did not learn to open the page by data-uri.

  • All the same, the frame is simpler) I completely agree - Roman Kozin
  • Thanks, I didn’t know that you can transfer data-uri to the iframe (though not in IE). - dzhioev
  • @Qwertiy Your script works, only there is one drawback, when I insert the 'css' code, the script stops working. - user185447
  • @Muson, you have # in css ... I'll fix it now. - Qwertiy ♦
  • @Muson, done. - Qwertiy ♦

Use the iframe for the 4th window. Not sure if this will work, but I would do this:

 $script = $('textarea.javascript'); $style = $('textarea.css'); $html = $('textarea.html'); $('iframe body).append($html); $('iframe script).append($script); $('iframe style).append($style);
  • You can explain in more detail - user185447 September
  • @Muson, easier lung. From each window we take the text and form the html page, which we then load into the iframe (in the fourth window). The resulting HTML page necessarily consists of HEAD, where we push the text from the CSS window, it also includes BODY, into which we push the text from the HTML window and finally under BODY we insert text from the JS window. It seems so. - StasHappy
  • onload inside the frame will not work. You also have typos in the answer. - Qwertiy ♦

The structure is approximately the same

 <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>

After the onkeyup event in one of the textarea you simply call a function that collects data from your textarea by id :

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

After that, generate a variable / object that will put all the data for the result in itself and at the end just output everything to the block using ('#result').html(page_data);

UPDATE 1

Wrote this structure and everything works:

  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>

Yes, not an iframe 's marketing option. But as a basis for feedl, I think, it will come off

  • 2
    Not good - the scripts will be executed within your page, and not the markup that the user specified. - Qwertiy ♦
  • Now I test all this. - Roman Kozin
  • @saturn, and concatenation of lines?) - Roman Kozin
  • @Qwertiy, but as a base, can get off - Roman Kozin