javascript - 将 Javascript 注入(inject) Iframe

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() );
        }

        });
      });

问题是当我尝试这样做时，它没有在 iframe 主体或头部中注入(inject)脚本标签。我已经阅读了有关注入(inject)和一些包含结束脚本标记的问题。我需要弄清楚如何注入(inject)脚本标签，真的希望它们在头部，但如果在主体中更容易，那就没问题了。

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

那么关于如何让我的编辑器与注入(inject) 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 命名空间中。

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

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

如果您不打算这样做，那么您必须测试一下在已插入(并解析)的样式标记上设置 .text() 的概念是否有效在所有相关浏览器中是否有效。

对于脚本标签，我很确定您必须创建一个新的脚本标签并重新插入它，但是除了重新定义全局符号之外，没有办法摆脱已经解析的旧代码。如果您确实想从头开始编写代码，则必须从头开始创建一个新的 iframe 对象。

<小时/>

这还存在其他问题。每次 .area_content_box 获得焦点时，您都​​会安装一个 .keyup() 事件处理程序，这很容易导致安装许多事件处理程序，所有事件处理程序都会被调用，并且所有尝试做同样的工作。