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更改，浏览器就会重新解析该文档，并且还会执行script标签。

无论如何，我们应该避免使用eval关键字，因为它是一项昂贵的操作，建议不要使用。

来自单独文本区域的HTML，CSS和JavaScript的标记和执行

1 个答案: