Question

我一直在创建一些像代码学院那样的HTML5互动学习项目。所以现在我的页面上有一个ace编辑器，我希望无论何时用户在编辑器上输入，结果都会显示在我在同一页面上的iframe上。我已经这样做了，所以现在每当用户键入html和css代码时，结果将在iframe上显示为同步。但问题是我尝试制作一个需要javascript的彩色填充画布。我从w3shcool中复制了canvas教程中的代码，画布确实出现了，但它看起来是空白的，没有颜色。到目前为止，这是我的代码。

这是我用来将ace编辑器的值放入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>

这是我放在Ace编辑器上的画布脚本：

<!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>

您的帮助将不胜感激

Answer 1

设置innerHTML时不会评估脚本，您需要设置数据网址，其中编辑器的内容作为iframe的来源。或者找到或编写元素并在每个元素上调用iFrame.contentWindow.eval(script.textContent)。

另请查看https://github.com/jsbin/jsbin

处的jsbin源代码

Javascript不适用于来自Ace Editor的iframe的iframe

1 个答案: