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

下面，您可以找到一个非常简单的示例。

要将HTML呈现到视图中，您可以从value中获取textarea并粘贴到您想要的内容中

const code = document.querySelector('.code');
const btn = document.querySelector('.btn');
const render = document.querySelector('.render');

btn.addEventListener('click', () => {
	const getHTML = code.value;
  
  render.innerHTML = getHTML;
})

.code {
  width: 200px;
  height: 200px;
}

<textarea class="code"></textarea>
<button class="btn">go</button>

<div class="render"></div>

Answer 2

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

如何创建类似jsfiddle的所见即所得

2 个答案: