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沒有沖突。