將Ifject注入Iframe

Question

我正在爲我的網站製作一個現場編輯器。我有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對象。

---

還有其他的問題。每當.area_content_box獲得焦點時，您正在安裝.keyup()事件處理程序，這可能會導致很多安裝的事件處理程序結束，所有事件處理程序都會被調用，並且都會嘗試執行相同的工作。