我一直在创建一些 HTML5 交互式学习项目，例如代码学院的项目。所以现在我的页面上有一个 ace 编辑器，我希望每当用户在编辑器上键入时，结果都会显示在同一页面上的 iframe 上。我已经这样做了，所以现在每当用户输入 html 和 css 代码时，结果都会在 iframe 上同步显示。但问题是我尝试制作一个需要 JavaScript 的彩色 Canvas 。我从 w3shcool 的 Canvas 教程中复制了代码， 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 编辑器上的 Canvas 脚本:
<!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>
您的帮助将不胜感激
最佳答案
设置innerHTML时不会评估脚本，您需要使用编辑器的内容设置数据url作为iframe的源。
或者查找或编写脚本元素并对每个元素调用 iFrame.contentWindow.eval(script.textContent)。
还可以查看 jsbin 源代码 https://github.com/jsbin/jsbin
关于Javascript 无法在来自 Ace Editor 的源代码的 iframe 上运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21458563/