将Javascript注入Iframe
我正在为我的网站制作一个实时编辑器。 我有CSS和HTML部分，现在唯一的问题是JS部分。 这是代码的片段
var frame = $('#preview_content'), contents = frame.contents(), body = contents.find('body'); csstag = contents.find('head').append('').children('style'); java = contents.find('head').append('').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的建议呢？
这两行代码看起来可能有问题：
csstag = contents.find('head').append('').children('style'); java = contents.find('head').append('
看起来创建样式标记并记住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()事件处理程序，这很容易导致安装了许多事件处理程序，所有事件都被调用，所有人都尝试执行相同的工作。