将 Javascript 注入 iframe

Question

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

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 主体和头部注入脚本标签。我已经阅读了有关注入和一些包含结束脚本标记的问题。我需要弄清楚如何注入脚本标签，真的希望它们在头脑中，但如果在身体中更容易，那很好。

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 对象。

---

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