title: How to inject jQuery or JavaScript to an iFrame?
body: <p>I am trying to build a HTML,CSS, jQuery/JavaScript editor... How can I inject JavaScript or jQuery into an iFrame? I tried searching all related answers here, but none of the solutions is helping...</p>
  
  <p>here's what I am talking about...#css, #js are textareas, while #iframe_id is an iframe used to preview the changes.</p>
  
  <pre><code>css_code = $('#css').val();
  js_code = $('#js').val();
  
  css_content = "&lt;style&gt;" + css_code + "&lt;/style&gt;";  // working
  js_content = "&lt;script&gt;" + js_code + "&lt;/script&gt;";  // does not work
  $('#iframe_id').contents().find('head').append(css_content);  // working
  $('#iframe_id').contents().find('body').append(js_content);  // does not work
  </code></pre>
  
  <p>The following works but only if I use core JavaScript, not sure why...frame[0] basically is the same iframe (#iframe_id)...</p>
  
  <pre><code>var js_content = jsEditor.getValue();
  frames[0].window.eval(js_content);   // works only when JavaScript is entered (not jQuery)
  </code></pre>
  
  <p>It may be something to do with the 'script' tags, maybe jQuery has a problem with it...not sure why.</p>