带有 iFrame 的 HTML 编辑器不工作答案

【问题标题】：HTML Editor With iFrame Not Working带有 iFrame 的 HTML 编辑器不工作
【发布时间】：2016-08-15 08:28:11
【问题描述】：

* {
    padding: 0;
    margin: 0;
}
body {
    font-family: sans-serif;
}

.grid {
    width: 50%;
    float: left;
    padding: 30px 50px;

}

.container {
    background: #e3e3e3;
}


textarea {
    width: 100%;
    height: 200px;
    resize: none;
    margin-top: 20px;
    margin-bottom: 50px;
}

iframe {
    border-style: solid;
    border-color: aqua;
    height: 1000px;
    width: 100%;
    display: block;
}

<!DOCTYPE HTML>
<hmtl>
    <head>
        <link rel = "stylesheet" type = "text/css" href = "style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        
       <script>
            (function() {
$('grid').height($(window).height() );

var frame = $('iframe');
var contents = frame.contents();
var body = contents.find('body')
var styleTag = contents.find('head').append('<style></style>').children('style');

$('textarea').focus(function() {
var $this = $(this);
$this.keyup(function() {
if ($this.attr('id') == 'html') {
body.html($this.val() );
}
else
{
styleTag.text($this.val() );
}
});
});
});
            
</script>
    </head>
    
    <body>
        <div class = "container grid">
            <form>
                <h2>HTML</h2>
                <textarea id = "html"></textarea>
                
                <h2>CSS</h2>
                <textarea id = "css"></textarea>
            </form>
        </div>
        
        <div class = "output grid">
            <iframe></iframe>
        </div>
    </body>
</hmtl>

我正在尝试制作一个简单的在线 html 编辑器（如 codepen），但结果没有显示出来。我已经尝试解决这个问题一个多小时了！请帮忙！这个问题困扰着我，互联网也无济于事！我怀疑 jQuery 有问题，但看起来不像

【问题讨论】：

请编辑您的问题，使其比“结果未显示”更具体。
我希望用户在 html 和 css 文本区域中键入 html 代码，并将其“显示”在 iFrame 中。到目前为止，在 textarea 中键入 html 和 css 代码时，iFrame 似乎没有响应。

标签： javascript jquery html css iframe

【解决方案1】：

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

如果您打算将脚本保留在 head 标记中，则需要将函数放在 DOMContentLoaded 事件侦听器中。

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

JQuery 等价物...

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

and that's all you need to get your editor working.

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

我开发了kodeWeave，并在我的平板电脑上在线和离线使用它。它有一些演示，例如代码编辑器 (CodeMirror)、拆分器（来自 jqxSplitter 等等。

这些只是一些额外的提示，可帮助您开始制作代码游乐场。

如果你想了解更多关于how to make your own coding playground的信息，我还制作了一个视频。

【讨论】：

我已经进行了更改，但无法让 Javascript / jQuery 工作：/ 我已经检查了您的 JS Bin 和代码 JS 代码和 HTML 相同。我还将您的 JS Bin 代码复制到我的 index.html 中并尝试运行它。没有成功。但是您的 JS Bin 示例有效。我的示例位于 obertguo.github.io/tryittest 。我复制了代码，但没有成功。
正如我所说，在您的开始脚本标记之后将(function() { 替换为$(document).ready(function() {。
很抱歉，当答案就在我面前时，我浪费了您的时间。我只是愚蠢地没有按照你说的去做。谢谢你:)