rails Uncaught TypeError：无法读取 null 的属性“contentDocument”答案

【问题标题】：rails Uncaught TypeError: Cannot read property 'contentDocument' of nullrails Uncaught TypeError：无法读取 null 的属性“contentDocument”
【发布时间】：2016-03-16 12:40:12
【问题描述】：

我正在 Rails 中制作代码镜像，但 iframe 未显示，并且出现错误。该代码在普通的 html 页面中运行良好，但在 ruby on rails 上失败了这个错误

new:269 Uncaught TypeError: Cannot read property 'contentDocument' of null

这就是它发生的那一行 iframe_doc = iframe.contentDocument;

这是我的全新代码

        <!DOCTYPE html>
    <html lang="en">

  <div class="row">

  <!-- Code Editors -->
  <div class="col s6">
    <div class="row">
      <%= form_for(@hcj) do |f| %>
      <%= render 'shared/error_messages', object: f.object %>
      <div class="field">
        <div id="html" class="s3">
          <h3>HTML</h3>

          <%= f.text_area :html, placeholder: "Compose new micropost...", name: "html" %>
        </div>

        <div id="css" class="s3">
          <h3>css</h3>
          <%= f.text_area :css, placeholder: "Compose new micropost...", name: "css" %>
        </div>
        <div id="js" class="s3">
          <h3>js</h3>
          <%= f.text_area :js, placeholder: "Compose new micropost...", name: "js" %>
        </div>
      </div>
      <%= f.submit "Post", class: "btn btn-primary" %>
      <% end %>
    </div>


  </div>

  <!-- Sandboxing -->
  <h3>sandbox</h3>
  <div class="col s6">
    <iframe id="frameId"></iframe>
  <script type="text/javascript">
      var frame = window.frames.frameId;
  </script>
  </div>

</div>

<script>
    (function () {

        // Base template
        var base_tpl =
            "<!doctype html>\n" +
            "<html>\n\t" +
            "<head>\n\t\t" +
            "<meta charset=\"utf-8\">\n\t\t" +
            "<title>Test</title>\n\n\t\t\n\t" +
            "</head>\n\t" +
            "<body>\n\t\n\t" +
            "</body>\n" +
            "</html>";

        var prepareSource = function () {
            var html = html_editor.getValue(),
                css = css_editor.getValue(),
                js = js_editor.getValue(),
                src = '';

            // HTML
            src = base_tpl.replace('</body>', html + '</body>');

            // CSS
            css = '<style>' + css + '</style>';
            src = src.replace('</head>', css + '</head>');

            // Javascript
            js = '<script>' + js + '<\/script>';
            src = src.replace('</body>', js + '</body>');

            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('<p>Hello World</p>');
        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 < 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 < cms.length; i++) {
          cms[i].style.height = '100%';
        }*/

    }());
</script>

【问题讨论】：

i am making code mirror in rails but i et this error 是什么意思？请花时间修改问题描述，以便更容易理解。
修改了我的问题

标签： javascript jquery ruby-on-rails ruby iframe

【解决方案1】：

为您的 iframe 设置id，然后您可以通过以下代码获取您的框架：

<iframe id="frameId"></iframe>
<script type="text/javascript">
    var frame = window.frames.frameId;
</script>

【讨论】：

这在普通 html 中工作正常，但在 ruby on rails 上失败
你确定你的iframe在被ruby on rails渲染后存在于你的html代码中吗？
是的，它在调试器部分中显示 var iframe = document.querySelector('#output iframe'), iframe_doc = iframe.contentDocument; @Dmitriy 并且当我更改文本区域中的任何内容时也会消除此错误 Uncaught TypeError: Cannot read property 'contentDocument' of null
在您的控制台 (F12) 中键入 document.querySelector('#output iframe')。结果是什么？ null 或 iframe?
表示id为output的元素内部没有iframe。或者这个 iframe 在另一个框架内。