从一个文本中插入JavaScript到iframe(Inject Javascript from a

我试图让一个代码游乐场像Tinkerbin 。

它basicaly需要的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'));

文章来源: Inject Javascript from a textarea into an Iframe