注入Javascript来的iFrame(Injecting Javascript to Ifram

2019-07-21 09:33发布

我正在为我的网站的实时编辑。 我有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对象。


没有与此太等问题。 你安装.keyup()每次时间事件处理程序.area_content_box获得焦点。这很容易与许多安装,全部得到被称为事件处理程序和所有试图做同样的工作的结束。



文章来源: Injecting Javascript to Iframe