title: dynamically inserting content into iframe - jquery not working
body: <p>when I have a static page with an iframe the jquery is working properly. However, if I dynamically generate the exact same html, jquery is not. If I inspect the element in chrome and copy the dynamically generated iframe contents and save it as a static page, it works. </p>
  
  <p><strong>Static &amp; jQuery works</strong>:</p>
  
  <p><em>test.html:</em></p>
  
  <pre><code>...
  &lt;iframe name="result" sandbox="allow-popups allow-scripts allow-same-origin allow-modals" frameborder="0" marginwidth="0" marginheight="0" src="/iFrame" width="100%" height="900px"&gt;&lt;/iframe&gt;
  ...
  </code></pre>
  
  <p><em>iFrame.html:</em></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="/javascripts/jquery-3.1.0.min.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;.test { display:inline-flex; padding-top:10px; padding-bottom: 10px; padding-left: 40px; padding-right: 40px; background-color:rgb(50,100,230); color:white;  justify-content:center; align-items:center; font-size:20pt; font-weight:lighter; font-family: sans-serif }&lt;/style&gt;
      &lt;script type="text/javascript"&gt;
        //&lt;![CDATA[
        $(document).ready(function() {$('.test').text('hello');});
        //]]&gt;
      &lt;/script&gt;
      &lt;style type="text/css"&gt;.iFrameStyle: { margin:10px; }&lt;/style&gt;
    &lt;/head&gt;
    &lt;body class="iFrameStyle"&gt;
      &lt;div class="test"&gt;test&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>result</em>:
  <a href="https://i.stack.imgur.com/ySWKZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ySWKZ.png" alt="enter image description here"></a></p>
  
  <p><strong>Dynamically generating this iFrame - jQuery fails to load</strong></p>
  
  <p><em>chrome inspector of iframe</em></p>
  
  <pre><code>   &lt;html&gt;
        &lt;head&gt;
          &lt;script type="text/javascript" src="/javascripts/jquery-3.1.0.min.js"&gt;               
          &lt;/script&gt;
          &lt;style type="text/css"&gt;
            .test { display:inline-flex; padding-top:10px; padding-bottom: 10px; padding-left: 40px; padding-right: 40px; background-color:rgb(50,100,230); color:white;  justify-content:center; align-items:center; font-size:20pt; font-weight:lighter; font-family: sans-serif }
           &lt;/style&gt;
           &lt;script type="text/javascript"&gt;//&lt;![CDATA[
             $(document).ready(function() { 
                $('.test').text('hello');
             });
      //]]&gt;
      &lt;/script&gt;
     &lt;style type="text/css"&gt;.iFrameStyle: { margin:10px; }&lt;/style&gt;
     &lt;/head&gt;
      &lt;body class="iFrameStyle"&gt;&lt;div class="test"&gt;test&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p><em>result</em> (should be hello)</p>
  
  <p><em>how the iframe content is dynamically being generated:</em></p>
  
  <pre><code>function showPreview() {
      var button = $('.createComponentPreview');
      var update = $('.updateComponentPreview');
      update.fadeIn();
      //set the name above the card
      var name = $('.componentName').val();
      if (name === '') {
        name = $('.componentTempName').text();
      }
      $('.componentNameVal').text(name);
  
      //set the iframe contents
      var sandbox = $('.sandboxed');
      var html = $('textarea[name="html"]').val();
      var css = $('textarea[name="css"]').val();
      var js = $('textarea[name="js"]').val();
  
      //remove any previous content
      var head = sandbox.contents().find('head');
      var body = sandbox.contents().find('body');
      head.empty();
      body.empty();
  
      //insert
      var htmlContainer = document.createElement('div');
      var cssContainer = document.createElement('style');
      var jsContainer = document.createElement('script');
      jsContainer.setAttribute('type', 'text/javascript');
      cssContainer.setAttribute('type', 'text/css');
      var iFrameStyle = $(cssContainer).clone();
      $(head).append(cssContainer);
      $(head).append(jsContainer);
      $(html).append(htmlContainer);
      $(cssContainer).text('\n\t'+css+'\n');
      $(head).append(iFrameStyle);
      iFrameStyle.append('.iFrameStyle: { margin:10px; }');
  
      //append any environment scripts
      for (var i in componentOptions) {
        if (componentOptions[i] == 'jquery') {
          head.prepend('&lt;script type="text/javascript" src="/javascripts/jquery-3.1.0.min.js"&gt;&lt;/script&gt;');
          js = '$(document).ready(function() {'+js+'});';
        }
        else if (componentOptions[i] == 'react') {
          head.prepend('&lt;script type="text/javascript" src="react-dom.min.js"&gt;&lt;/script&gt;');
          head.prepend('&lt;script type="text/javascript" src="react.min.js"&gt;&lt;/script&gt;');
        }
        else if (componentOptions[i] == 'noMargin') {
          iFrameStyle.append('.iFrameStyle { margin:0px; }');
        }
        else if (componentOptions[i] == 'alignCenter') {
          iFrameStyle.append('.iFrameStyle { display:flex; justify-content:center; align-items:center }');
        }
      }
      body.removeAttr('marginwidth').removeAttr('marginheight');
      body.addClass('iFrameStyle');
      body.prepend(html);
      $(jsContainer).text('//&lt;![CDATA[\n'+js+'\n//]]&gt;\n');
  
      sandbox.css('min-height', '300px');
      sandbox.css('width', '100%');
      var card = $('.contentContainer.expandable').fadeIn();
  
  
      button.text('Close Preview');
      button.attr('previewMode', 'true');
    }
  </code></pre>
  
  <p><em>the error message I am getting:</em></p>
  
  <pre><code>ReferenceError: $ is not defined
  </code></pre>
  
  <p>and the link in chrome's developer console to this error shows:</p>
  
  <pre><code>//&lt;![CDATA[
  $(document).ready(function() {$('.test').text('hello');});
  //]]&gt;
  </code></pre>
  
  <p>both the working static and dynamic non-working iframes both contain the exact same url for jquery, and I am not getting a 404 error.</p>
  
  <p>I'm stuck on this so any help is appreciated!</p>
  
  <p>Thanks!</p>
  
  <p><a href="https://i.stack.imgur.com/Ntfbd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ntfbd.png" alt="enter image description here"></a></p>