Question

我正在为一个实时的html / js / jquery / css编辑器创建自己的代码。这是简单地注入css，html和javascript（特别是jquery）的代码。 css和html工作正常，但无论我做什么ican似乎都得到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>

如果有人看到我的代码有问题请帮助，如果你回答请解释你的解决方案，而不是只输入一段代码....我尝试将jquery和常规javascript输入到html textarea（内一个脚本标签，但它仍然没有用。）

Answer 1

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

我认为你的问题比这更深刻。我的理解是，当您将一个脚本标记注入到dom中时，它会立即进行评估，但是您正在等待将实际代码放入已经添加到页面中的内容之后。重新排序。

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

注意我必须带出选择器内容，因为它属于不同功能的范围。

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

1 个答案: