Javascript無法在來自Ace編輯器的iframe上工作

我一直在創建一些HTML5交互式學習項目，如代碼學院的項目。所以現在我在我的頁面上有一個ace編輯器，並且我希望每當用戶鍵入編輯器時，結果將顯示在我擁有同一頁面的iframe上。我已經這樣做了，現在只要用戶鍵入html和css代碼，結果就會在iframe上同步顯示。但問題是我嘗試製作一個需要JavaScript的彩色填充畫布。我從w3shcool複製了來自canvas tutorial的代碼，並且畫布確實出現了，但它看起來沒有顏色的空白。到目前爲止，這是我的代碼。Javascript無法在來自Ace編輯器的iframe上工作

這裏是我用來放王牌編輯器的值到iframe的腳本：

<script> 
    var editor = ace.edit("editor"); 
    editor.setTheme("ace/theme/twilight"); 
    editor.getSession().setMode("ace/mode/html"); 

    editor.getSession().on('change', function(e) { 
    var x = editor.getValue(); 
    var iFrame = document.getElementById('myframe'); 
    var iFrameBody; 
    if (iFrame.contentDocument) 
    { // FF 
     iFrameBody = iFrame.contentDocument.getElementsByTagName('html')[0]; 
    } 
    else if (iFrame.contentWindow) 
    { // IE 
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('html')[0]; 
    } 
     iFrameBody.innerHTML = x; 
    }); 

$("button").click(function(){ 

}); 
    </script>

而且這裏的一對HTML我的iframe標籤：

<iframe id="myframe" name="listenMsg" frameborder="0" src=""> 

</iframe>

而這裏的帆布腳本我穿上王牌編輯：

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

    <script> 

    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    ctx.font="30px Arial"; 
    ctx.fillText("Hello World",10,50); 

    </script> 

    </body> 
    </html>

您的幫助，將不勝感激

來源

2014-01-30 johnnycorleone

什麼是不工作？你收到的錯誤是什麼？ –

我用來填充顏色的畫布無法正常工作。所以畫布上沒有顏色。 – johnnycorleone