javascript - 从单独的文本区域标记和执行 HTML、CSS 和 JavaScript

Question

我使用在 iframe 中输出的 jQuery 函数找到了不同文本区域中 HTML 和 CSS 实时标记的代码:

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 关键字，因为它是一项昂贵的操作，建议不要使用。