将文本区域中的 Javascript 注入 Iframe

Question

我正在尝试制作像 Tinkerbin 这样的代码游乐场。

它基本上将 CSS / HTML / Javascript 代码从不同的 Textarea 中提取出来，并将其注入到 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>标签会导致浏览器运行脚本。如果稍后插入脚本内容，可能无法运行，但我不确定。试试这样：

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