将Javascript注入Iframe [英] Injecting Javascript to Iframe

问题描述

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

I am making a live editor for my website. I have the CSS and HTML parts down, only issue is the JS part now. Here is a snippet of the code

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

Problem is it is not injecting script tags in the iframes body nor the head when ever I try this. I've read up on injecting and some issues containing the ending script tag. I need to figure out how to inject script tags, really want them in the head but if it is easier in the body that is fine.

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

jfriend00 - I will be focusing on making this vanilla, if you think I should honestly.

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

So any words of advice on how to go about making my editor work correctly with the injecting JS?

推荐答案

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

These two lines of code look like they could have problems:

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

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

It seems like it would be much better to create the style tag and remember that DOM element.

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文本到样式标记。

This should work for the body HTML and it may work for the CSS text into the style tag.

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

I do not believe it will work for the javascript as you can't change a script by assigning text to the tag the way you are. Once a script has been parsed, it's in the javascript namespace.

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

There is no public API I'm aware of for removing previously defined and interpreted scripts. You can redefine global symbols with subsequent scripts, but not remove previous scripts or their effects.

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

If this were my code, I'd remove the previous style tag, create a new one, set the text on it before it was inserted in the DOM and then insert it in the DOM.

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

If you're not going to do it that way, then you'll have to test to see if this concept of setting .text() on an already inserted (and parsed) style tag works or not in all relevant browsers.

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

For the script tag, I'm pretty sure you'll have to create a new script tag and reinsert it, but there's no way to get rid of older code that has already been parsed other than redefining global symbols. If you really wanted to start fresh on the code, you'd have to create a new iframe object from scratch.

这也有其他问题。每当 .area_content_box 获得焦点时，您就会安装一个 .keyup（）事件处理程序，这很容易就会结束安装了许多事件处理程序，所有事件都被调用，并且都尝试执行相同的工作。

There are other issues with this too. You're installing a .keyup() event handler every time the .area_content_box gets focus which could easily end up with many of the event handlers installed, all getting called and all trying to do the same work.

这篇关于将Javascript注入Iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！