Как внедрить jquery в iframe из зеркала кода - PullRequest
Новая
       15

Как внедрить jquery в iframe из зеркала кода

0 голосов
/ 28 октября 2019

У меня есть три кодовых зеркала (html, css, javascript). Предполагается, что мои студенты смогут набрать любой из них, после чего код будет добавлен в iframe. Когда код написан, и ученики нажимают «go», код JavaScript запускается следующим образом: 

$("#create").click(function () {
  $("#iframe").contents().find("body").html("");
  var htmlEditor = $('.CodeMirror')[0].CodeMirror;
  var cssEditor = $('.CodeMirror')[1].CodeMirror;
  var jsEditor = $('.CodeMirror')[2].CodeMirror;
   $("#iframe").contents().find("body").html(htmlEditor.getValue());
   $('#iframe').contents().find("head").html("");
   $('#iframe').contents().find("head").append('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>');    
   $('#iframe').contents().find("head").append($("<style type='text/css'>" + cssEditor.getValue() + "</style>"));     
   $('#iframe').contents().find("head").append($("<script type='text/javascript'>" + jsEditor.getValue() + "</script>"));
 });

HTML и CSS работают нормально, однако я получаю следующую ошибку с JQuery:

Uncaught ReferenceError: $ не определено

HTML-код для iframe выглядит следующим образом: 

<html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
 </script>
 <style type="text/css">
    p{
       color:green;
      }
  </style>
  <script type="text/javascript">$(document).ready(function () {
     $(".go-red").click(function(){
     $(".p-tag").css("color", "red");
     });
   });
  </script>
</head>
<body>  
    <p class="p-tag">hello</p>
    <button class="go-red">button</button>  
</body>
</html>

Мне кажется, именно так w3schools настроил свои учебные страницы для работы. Я что-то упустил?

...