title: rails Uncaught TypeError: Cannot read property 'contentDocument' of null
body: <p>am making code mirror in rails but the iframe is not displaying and it caugh error. the code works fine in normal html page but fails on ruby on rails  this error</p>
  
  <pre><code>new:269 Uncaught TypeError: Cannot read property 'contentDocument' of null
  </code></pre>
  
  <p>and this the line it happens
  <code>iframe_doc = iframe.contentDocument;</code></p>
  
  <p>and this my whole new code </p>
  
  <pre><code>        &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
  
    &lt;div class="row"&gt;
  
    &lt;!-- Code Editors --&gt;
    &lt;div class="col s6"&gt;
      &lt;div class="row"&gt;
        &lt;%= form_for(@hcj) do |f| %&gt;
        &lt;%= render 'shared/error_messages', object: f.object %&gt;
        &lt;div class="field"&gt;
          &lt;div id="html" class="s3"&gt;
            &lt;h3&gt;HTML&lt;/h3&gt;
  
            &lt;%= f.text_area :html, placeholder: "Compose new micropost...", name: "html" %&gt;
          &lt;/div&gt;
  
          &lt;div id="css" class="s3"&gt;
            &lt;h3&gt;css&lt;/h3&gt;
            &lt;%= f.text_area :css, placeholder: "Compose new micropost...", name: "css" %&gt;
          &lt;/div&gt;
          &lt;div id="js" class="s3"&gt;
            &lt;h3&gt;js&lt;/h3&gt;
            &lt;%= f.text_area :js, placeholder: "Compose new micropost...", name: "js" %&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;%= f.submit "Post", class: "btn btn-primary" %&gt;
        &lt;% end %&gt;
      &lt;/div&gt;
  
  
    &lt;/div&gt;
  
    &lt;!-- Sandboxing --&gt;
    &lt;h3&gt;sandbox&lt;/h3&gt;
    &lt;div class="col s6"&gt;
      &lt;iframe id="frameId"&gt;&lt;/iframe&gt;
    &lt;script type="text/javascript"&gt;
        var frame = window.frames.frameId;
    &lt;/script&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
      (function () {
  
          // Base template
          var base_tpl =
              "&lt;!doctype html&gt;\n" +
              "&lt;html&gt;\n\t" +
              "&lt;head&gt;\n\t\t" +
              "&lt;meta charset=\"utf-8\"&gt;\n\t\t" +
              "&lt;title&gt;Test&lt;/title&gt;\n\n\t\t\n\t" +
              "&lt;/head&gt;\n\t" +
              "&lt;body&gt;\n\t\n\t" +
              "&lt;/body&gt;\n" +
              "&lt;/html&gt;";
  
          var prepareSource = function () {
              var html = html_editor.getValue(),
                  css = css_editor.getValue(),
                  js = js_editor.getValue(),
                  src = '';
  
              // HTML
              src = base_tpl.replace('&lt;/body&gt;', html + '&lt;/body&gt;');
  
              // CSS
              css = '&lt;style&gt;' + css + '&lt;/style&gt;';
              src = src.replace('&lt;/head&gt;', css + '&lt;/head&gt;');
  
              // Javascript
              js = '&lt;script&gt;' + js + '&lt;\/script&gt;';
              src = src.replace('&lt;/body&gt;', js + '&lt;/body&gt;');
  
              return src;
          };
  
          var render = function () {
              var source = prepareSource();
  
              var iframe = document.querySelector('#output iframe'),
                  iframe_doc = iframe.contentDocument;
  
              iframe_doc.open();
              iframe_doc.write(source);
              iframe_doc.close();
          };
  
  
          // EDITORS
  
          // CM OPTIONS
          var cm_opt = {
              mode: 'text/html',
              gutter: true,
              lineNumbers: true,
          };
  
          // HTML EDITOR
          var html_box = document.querySelector('#html textarea');
          var html_editor = CodeMirror.fromTextArea(html_box, cm_opt);
  
          html_editor.on('change', function (inst, changes) {
              render();
          });
  
          // CSS EDITOR
          cm_opt.mode = 'css';
          var css_box = document.querySelector('#css textarea');
          var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);
  
          css_editor.on('change', function (inst, changes) {
              render();
          });
  
          // JAVASCRIPT EDITOR
          cm_opt.mode = 'javascript';
          var js_box = document.querySelector('#js textarea');
          var js_editor = CodeMirror.fromTextArea(js_box, cm_opt);
  
          js_editor.on('change', function (inst, changes) {
              render();
          });
  
          // SETTING CODE EDITORS INITIAL CONTENT
          html_editor.setValue('&lt;p&gt;Hello World&lt;/p&gt;');
          css_editor.setValue('body { color: red; }');
  
  
          // RENDER CALL ON PAGE LOAD
          // NOT NEEDED ANYMORE, SINCE WE RELY
          // ON CODEMIRROR'S onChange OPTION THAT GETS
          // TRIGGERED ON setValue
          // render();
  
  
          // NOT SO IMPORTANT - IF YOU NEED TO DO THIS
          // THEN THIS SHOULD GO TO CSS
  
          /*
            Fixing the Height of CodeMirror.
            You might want to do this in CSS instead
            of JS and override the styles from the main
            codemirror.css
          */
          var cms = document.querySelectorAll('.CodeMirror');
          for (var i = 0; i &lt; cms.length; i++) {
  
              cms[i].style.position = 'absolute';
              cms[i].style.top = '30px';
              cms[i].style.bottom = '0';
              cms[i].style.left = '0';
              cms[i].style.right = '0';
              cms[i].style.height = '100%';
          }
          /*cms = document.querySelectorAll('.CodeMirror-scroll');
          for (i = 0; i &lt; cms.length; i++) {
            cms[i].style.height = '100%';
          }*/
  
      }());
  &lt;/script&gt;
  </code></pre>