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＆amp; CSS控制你的页面。

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

1 个答案: