Question

我正在为我的网站制作一个实时编辑器。我有CSS和HTML部分，现在唯一的问题是JS部分。这是代码的片段

var frame = $('#preview_content'),
           contents = frame.contents(),
           body = contents.find('body');
           csstag = contents.find('head').append('<style></style>').children('style');
           java = contents.find('head').append('<script><\/script>').children('script');//Issues here
       $('.area_content_box').focus(function() {
       var $this = $(this);
       var check = $this.attr('id');
        $this.keyup(function() {

        if (check === "html_process"){
        body.html($this.val());
        } else if(check === "css_process") {
        csstag.text($this.val());
        } else if (check === "java_process"){
        java.text( $this.val() );
        }

        });
      });

问题是，当我尝试这个时，它不会在iframes体内注入脚本标签，也不会注入头部。我已经阅读了有关注入和包含结束脚本标记的一些问题。我需要弄清楚如何注入脚本标签，真正想要它们在头部，但如果它在身体更容易，那就好了。

jfriend00 - 如果你认为我应该诚实的话，我将专注于制作这款香草。

所以关于如何使用注入JS使我的编辑器正常工作的任何建议？

Answer 1

这两行代码看起来可能有问题：

csstag = contents.find('head').append('<style></style>').children('style');
java = contents.find('head').append('<script><\/script>').children('script');//Issues here

似乎创建样式标记并记住DOM元素会好得多。

var iframe = document.getElementById("preview_content");
var iframewindow = iframe.contentWindow || iframe.contentDocument.defaultView;
var doc = iframewindow.document;
var csstag = doc.createElement("style");
var scripttag = doc.createElement("script");
var head = doc.getElementsByTagName("head")[0];
head.appendChild.cssTag;
head.appendChild.scriptTag;

$('.area_content_box').focus(function() {
    var $this = $(this);
    var check = this.id;
    $this.keyup(function() {
        if (check === "html_process") {\
            // I would expect this to work
            doc.body.html($this.val());
        } else if(check === "css_process") {
            // I don't know if you can just replace CSS text like this 
            // or if you have to physically remove the previous style tag
            // and then insert a new one
            csstag.text($this.val());
        } else if (check === "java_process"){
            // this is unlikely to work
            // you probably have to create and insert a new script tag each time
            java.text( $this.val() );
        }
    });
});

这应该适用于正文HTML，它可以用于CSS文本到样式标记。

我不相信它会对javascript起作用，因为你无法通过按照自己的方式为标记分配文本来更改脚本。解析一个脚本后，它就在javascript命名空间中。

我没有知道用于删除以前定义和解释的脚本的公共API。您可以使用后续脚本重新定义全局符号，但不能删除以前的脚本或其效果。

如果这是我的代码，我将删除以前的样式标记，创建一个新标记，在将其插入DOM之前在其上设置文本，然后将其插入DOM中。

如果您不打算这样做，那么您将不得不进行测试以查看在已插入（和已解析）样式标记上设置.text()的概念是否适用于所有相关浏览器。

对于脚本标记，我非常确定你必须创建一个新的脚本标记并重新插入它，但除了重新定义全局符号之外，没有办法摆脱已经解析过的旧代码。如果你真的想重新开始代码，你必须从头开始创建一个新的iframe对象。

此外还有其他问题。每次.keyup()获得焦点时，您都会安装.area_content_box事件处理程序，这很容易导致安装了许多事件处理程序，所有事件都被调用，所有人都尝试执行相同的工作。

将Javascript注入Iframe

1 个答案: