rails未捕獲TypeError：無法讀取屬性'contentDocument'爲空

-1

正在rails中製作代碼鏡像，但iframe未顯示，並且顯示錯誤。代碼工作在普通的HTML頁面不錯，但未能在Ruby on Rails的這個錯誤rails未捕獲TypeError：無法讀取屬性'contentDocument'爲空

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>

來源

2016-03-16 geniuskid kanyi

什麼'我在軌道中使代碼鏡像，但我和這個錯誤'是什麼意思？請花時間修改問題描述，以便更容易理解。 –

已修改我的問題 –

集id爲您的iframe，然後您可以通過此代碼獲取您的框架：

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

來源

2016-03-16 12:44:34

這在正常的html中正常工作，但在軌道上的ruby失敗 –

您確定您的html代碼中的iframe是否存在於ruby在rails上呈現之後？ –

是的，它顯示在調試器部分var iframe = document.querySelector（'＃output iframe'）， iframe_doc = iframe.contentDocument; @Dmitriy，並且當我更改textareas中的任何內容時，還會拋出此錯誤Uncaught TypeError：無法在控制檯（F12）中讀取屬性'contentDocument'爲null的 –

rails未捕獲TypeError：無法讀取屬性'contentDocument'爲空

回答

相關問題