Разметка и выполнение HTML, CSS и JavaScript из отдельных текстовых областей

Question

Я нашел код для разметки в реальном времени для HTML и CSS в различных текстовых областях, используя функцию jQuery, которая выводит в iframe:

HTML

<div class="container grid">
   <form>
      <h3>HTML</h3>
      <textarea id="html" class="edit"></textarea>     // TEXTAREA FOR HTML

      <h3>CSS</h3>
      <textarea id="css" class="edit"></textarea>       // TEXTAREA FOR CSS
   </form>
</div>
<div class="output grid">
   <iframe></iframe>
</div>

JQUERY для разметки

function() {
   $(".grid").height($(window).height());

   var contents = $("iframe").contents(),
       body = contents.find("body"),
       styleTag = $("<style></style>").appendTo(contents.find("head"));

   $("textarea.edit").keyup(function() {
      var $this = $(this);
      if ($this.attr("id") === "html") {
         body.html($this.val());
      } else {
         // it had to be css
         styleTag.text($this.val());
      }
   });
})();

Что, если я хочу другую текстовую область для javascript?Я предполагаю, что вы не можете выполнить его в режиме реального времени, поэтому мне нужно включить кнопку для запуска eval() Но как?

Answer 1

В вашем HTML вы можете добавить другую текстовую область для кода javascript.

В обработчике событий textarea.edit вы можете добавить еще одну проверку для JavaScript и использовать что-то вроде этого -

$iframeEl.append(`<script>${textarea.val()}</script>`); 

Эта строка также будет выполнять ваш скрипт, потому что браузер анализирует документ всякий раз, когда он встречает изменение DOM, и он также выполняет тег скрипта.

В любом случае мы должны воздерживаться от использования ключевого слова eval, потому что это дорогостоящая операция и ее не рекомендуется использовать.