实时 JS/Jquery、Html、CSS 编辑器

Question

我正在为实时 html/js/jquery/css 编辑器创建自己的代码。这是简单地注入 css、html 和 javascript（特别是 jquery）的代码。 css 和 html 工作正常，但无论我做什么，我似乎都无法让 jquery 或 javascript 工作...... 这是我的代码：

var contents = $('iframe').contents(),
    body = contents.find('body'),
    styleTag = $('<style></style>').appendTo(contents.find('head'));
var makeScript = $('<script class type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"><\/script>');
var scriptTag = $('<script type="text/javascript"><\/script>').appendTo(contents.find('head'));
$ ('textarea').keyup(function() {
    var ths = $(this);
    if (ths.attr('id') === 'html') {
        body.html(ths.val());
    }
    else if (ths.attr('id') === 'css') {
        // it had to be css
        styleTag.text(ths.val());
    }
    else {
        makeScript.appendTo(contents.find('head'));
        scriptTag.text(ths.val());
    }
});

这是我的html：

<div>
    <form>
        <h2>HTML</h2>
        <textarea id="html"></textarea>
        <h2>CSS</h2>
        <textarea id="css"></textarea>
        <h2>JS</h2>
        <textarea id="js"></textarea>
    </form>
</div>
<div id="output" style="height: 487px;">
    <iframe src="about:blank"></iframe>
</div>

如果有人发现我的代码有问题，请帮忙，如果你回答，请解释你的解决方案，而不是仅仅输入一段代码......我尝试在 html textarea 中输入 jquery 和常规 javascript（在一个脚本标签，但它仍然不起作用）。

Answer 1

首先我认为你拼错了。应该是scriptTag.text(this.val());

我认为您的问题比这更深入。我的理解是，当您将脚本标签注入到 dom 中时，它会立即被评估，但是您正在等待将实际代码放入页面中之后。重新排序。

scriptTag = $("<script type='text/javascript'>" + this.val() + "</script>")
   .appendTo($('iframe').contents().find('head'));

请注意，我必须带出选择器内容，因为它在不同函数的范围内。