将Ifject注入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()); 
     } 

     }); 
     }); 

问题是，它不是在注射I帧体，也不是头脚本标记过我试试这个时候。我已经阅读了注入和一些包含结尾脚本标签的问题。我需要弄清楚如何注入脚本标记，真的希望它们在头部，但如果它在身体中更容易，那很好。

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()事件处理程序，这可能会导致很多安装的事件处理程序结束，所有事件处理程序都会被调用，并且都会尝试执行相同的工作。