javascript：我如何製作自己的測試模塊？

我想讓我自己的jfiddle版本。我發現使用html很容易，但使用JavaScript我遇到了一些麻煩。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功能？

來源

2013-07-03 Dylan Westra

看看jsFiddle的做法，如果你真的想複製它。提示：「iframe」是問題的關鍵。您將*需要*重新加載頁面，否則舊功能仍然會產生效果。 – lonesomeday

如果您希望他們使用沙箱，請不要使用它們。順便說一下你做的。 – lonesomeday

你想要設置的是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 &沒有衝突。

來源

2013-07-03 22:39:21

這工作謝謝:)你有我可以如何使用iframe來實現這個例子嗎？因爲我不能簡單地使用document.getElementById（「iframe」）。innerHTML = code; –

編輯演示如何使用iframe執行此操作 –

最後一次編輯，將腳本正確地附加到iframe的正文，並演示它在HTML上的工作。 –

javascript：我如何製作自己的測試模塊？

回答

相關問題