Question

我在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>

Answer 1

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

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

rails Uncaught TypeError：无法读取属性＆＃39; contentDocument＆＃39;为null

1 个答案: