javascript - 如何创建像 jsfiddle 这样的所见即所得

Question

我正在尝试创建自己的 jsfiddle 功能。

三个带有一些代码的文本框，但不知道如何用它们的内容制作(和重新制作)文件。

或者，是否有另一种无需创建文件即可播放代码的方法？

$('.button').on('click', function(){
// create demo.css, demo.html and demo.js   
// open a new tab and play all the code
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='txthtml'>
<div class='parent'>
<div class='title'>lorem 01</div>
<div class='title'>lorem 02</div>
<div class='title'>lorem 03</div>
</div>
</textarea>

<textarea class='txtcss'>
.parent{
background:gold;
}

.title{
margin:5px 0;
backgorund:lightgreen;
}
</textarea>

<textarea class='txtjs'>
$('.title').on('click', function(){
console.log('clicked');
});
</textarea>
<br><br>
<button>CLICK</button>

Answer 1

创建iframe并将内容写入iframe。 jsFiddle Demo ，不在这里工作，因为不允许访问 iframe。

$('button').on('click', function() {
  var addJquery = $('#addJqury').is(':checked')
  var html = $('.txthtml').val(),
    css = $('.txtcss').val(),
    js = $('.txtjs').val(),
    output = '<style>' + css + '</style>' +
    html +
    '<script>' + js + '<\/script>';
  if (addJquery)
    output = '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"><\/script>' + output;

  var iframe = window.results.document;
  
  iframe.write(output);
  iframe.close();
});

textarea{min-height:80px;min-width:200px}
iframe{width:100%;height:100%;display:block}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<textarea class="txthtml">
<div class='parent'>
<div class='title'>lorem 01</div>
<div class='title'>lorem 02</div>
<div class='title'>lorem 03</div>
</div>
</textarea>

<textarea class='txtcss'>
.parent{
background:gold;
}

.title{
margin:5px 0;
backgorund:lightgreen;
}
</textarea>

<textarea class='txtjs'>
$('.title').on('click', function(){
console.log('clicked: ' + $(this).html());
});
</textarea><br>
<input type="checkbox" id="addJqury" checked> Add Jquery?
<br><br>
<button>CLICK</button>
<hr>Results:
<hr>
<iframe name="results" src="about:blank"></iframe>