Question

我试图制作像Tinkerbin这样的代码游乐场。

它基本上从不同的Textareas中取出CSS / HTML / Javascript代码并将其注入到iframe中。它还应该立即更新Iframe。

但是我注意到Javascript注入了一点点。

看看，到目前为止我做了什么：

(function() {
    $('.grid').height( $(window).height() );    

    var contents = $('iframe').contents(),
        body = contents.find('body'),
        styleTag = $('<style></style>').appendTo(contents.find('head'));

    $('textarea').keyup(function() {
        var $this = $(this);
        if ( $this.attr('id') === 'html') {
            body.html( $this.val() );
        } 
        if ( $this.attr('id') === 'css') {
            styleTag.text( $this.val() );
        }
    });

})();

这会注入CSS和HTML，但不会注入Javascript。

我尝试添加

        scriptTag = $('<script></script>').appendTo(contents.find('head'));

和

        if ( $this.attr('id') === 'javascript') {
            scriptTag.text( $this.val() );
        }

但它不起作用

有人可以帮助我吗？

Answer 1

我认为您可能需要同时注入脚本标记和内容，因为插入<script>标记会导致broswer运行脚本。如果以后插入脚本内容，可能无法运行，但我不确定。试试这样：

$('<script></script>')
      .text($('theinputselectorhere').val())
      .appendTo(contents.find('head'));

将texta中的Javascript注入Iframe

1 个答案: