1

我正在尝试制作自己的 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函数呢？

4

1 回答 1

4

您要设置的是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 发生冲突。

于 2013-07-03T22:39:21.827 回答