rails Uncaught TypeError: Невозможно прочитать свойство contentDocument из null

-1

Я делаю зеркало кода в рельсах, но iframe не отображается и это ошибка caugh. код отлично работает в обычном HTML-страницу, но не на рубин на рельсах эту ошибкуrails Uncaught TypeError: Невозможно прочитать свойство contentDocument из null

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

Что означает 'я создаю зеркало кода в рельсах, но это ошибка? Пожалуйста, найдите время, чтобы пересмотреть описание проблемы, чтобы было более понятно. –

изменили мой вопрос –

Set id для вашего iframe, а затем вы можете получить свой кадр по этому коду:

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

источник

2016-03-16 12:44:34

это нормально работает в обычном html, но не работает на рубинах на рельсах –

Вы уверены, что ваш 'iframe' существует в вашем html-коде после его рендеринга ruby on rails? –

да, это и показывает это в разделе отладчика var iframe = document.querySelector ('# output iframe'), iframe_doc = iframe.contentDocument; @Dmitriy, а также выкидывает эту ошибку, когда когда-либо меняю что-либо в текстовом поле Uncaught TypeError: Не могу прочитать свойство contentDocument null от –

rails Uncaught TypeError: Невозможно прочитать свойство contentDocument из null

ответ

Смежные вопросы