javascript：我如何制作自己的测试模块？

Question

我正在尝试制作我自己的jfiddle版本。 我发现使用html很容易，但是使用javascript我遇到了一些麻烦。

这是我目前的代码：

<script>
var code;
var jscode;
function makeHTMLcode(code){
    document.getElementById("body").innerHTML = code;
}
function makeJScode(jscode){
    $(function() {
    document.getElementById("jstester").innerHTML ="<sc"+"ript>" + jscode + "</"+"script>";
    });
}
</script>

<div class="htmlTester"><textarea onkeyup="makeHTMLcode(this.value);"></textarea></div>
<div class="output">
 <div style="height:100%;background-color:white; border:1px solid gray;">
  <div id="body"></div>
  <div id="jscode"></div>
 </div>
</div>
<div class="JSTester"><textarea onkeyup="makeJScode(this.value);" ></textarea></div>

html代码与onkeyup一起到输出屏幕并立即工作。 但是javascript没有加载它的新功能。 当我使用document.write函数时，整个页面重新加载，但我的新制作的函数工作。 当我使用当前代码时，没有任何加载。

那么如何输出我的新javascript函数呢？

Answer 1

您要设置的是type （“text / javascript”）和text属性。

如果您将其粘贴到此页面上的控制台，则此方法有效：

// Create an iframe and append it to your document
var iframe = document.createElement('iframe');
iframe.height = 400;
iframe.width = 600;
document.body.appendChild(iframe);

// Use this to append your HTML into the iframe
iframe.contentWindow.document.body.innerHTML = 
    '<div id="test">This is my iFrame</div>';

// Create an script block and append it to your iframe to sandbox it
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = "document.getElementById('test').innerHTML = 'This is cool!'";
iframe.contentWindow.document.body.appendChild(script);

关于评论中的讨论，我同意你会想要使用iframe，因为你必须对JS和CSS进行沙盒处理，以便与控制你的页面的其他JS和CSS没有冲突。