Javascript iFrame不工作的HTML编辑器

*{
填充：0；
保证金：0；
}
身体{
字体系列：无衬线；
}
.电网{
宽度：50%；
浮动：左；
填充：30px 50px；
}
.集装箱{
背景：#e3；
}
文本区{
宽度：100%；
高度：200px；
调整大小：无；
边缘顶部：20px；
边缘底部：50px；
}
iframe{
边框样式：实心；
边框颜色：浅绿色；
高度：1000px；
宽度：100%；
显示：块；
}

（功能（）{
$（'grid'）.height（$（window.height（））；
var frame=$（'iframe'）；
var contents=frame.contents（）；
var body=contents.find（'body'）
var styleTag=contents.find（'head'）.append（''）.children（'style'）；
$（'textarea'）.focus（函数（）{
var$this=$（this）；
$this.keyup（函数（）{
if（$this.attr（'id'）=='html'）{
html（$this.val（））；
}
其他的
{
text（$this.val（））；
}
});
});
});
HTML
CSS

首先，您的脚本位于头部标记中，而不是结束正文标记中。这意味着脚本在添加任何内容之前运行

如果您的意图是将脚本保留在head标记中，则需要将函数放在

DOMContentLoaded

事件侦听器中

document.addEventListener('DOMContentLoaded', function() {
  // your script
})

JQuery等价物

$(document).ready(function() {
  // your script
})

如果您想将高级代码编辑器与广泛的API集成，我建议您查看或

我开发并在我的平板电脑上在线和离线使用它。它有一些演示，比如代码编辑器（CodeMirror）、拆分器（from）等等

这些只是帮助您开始编写代码的一些附加提示

---

如果您想了解更多信息，我还制作了一个视频。

请编辑您的问题，使其比“结果未显示”更具体。我希望用户在html和css文本区域键入html代码，并将其“显示”在iFrame中。到目前为止，当在textarea中键入html和css代码时，iFrame似乎没有响应。我已经做了更改，但无法让Javascript/jQuery工作：/我已经检查了你的JS-Bin，代码JS-code与html相同。我还将你的JS-Bin代码复制到我的index.html中，并尝试运行它。没有成功。但是您的JS-Bin示例仍然有效。我的示例位于obertguo.github.io/tryittest。我复制了代码，但没有成功。正如我所说，将

（function（）{

替换为

$（document）。就绪（function（））{

就在你的开场白标签之后。很抱歉，当答案就在我面前时，我浪费了你的时间。我只是愚蠢地没有按你说的做。谢谢：）