將Javascript從textarea注入Iframe

Question

我試圖製作一個Code Playground，如Tinkerbin。

它基本上將CSS/HTML/Javascript代碼從不同的Textareas中取出並注入到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'));