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

        });
      });

问题是当我尝试这样做时，它没有在 iframe 正文或头部中注入脚本标签.我已经阅读了注入和一些包含结束脚本标签的问题.我需要弄清楚如何注入脚本标签，真的希望它们在头脑中，但如果在身体中更容易，那很好.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！