javascript - 从文本区域执行 jquery

Question

我创建了一个小项目，使用eval()在文本区域内执行javascript

HTML

<textarea id='js'><textarea>

<iframe id="inlineframe"></iframe>

JAVASCRIPT

(function(){
$('#js').on('keyup', runjs);
});

function runjs(){ document.getElementById('inlineframe').contentWindow.eval($('#js').val());
}

效果很好吗？但是如果我不只是想执行 javascript 该怎么办？如果我想让它执行 jquery 怎么办？如何将其包含在函数中？

Answer 1

您的 HTML 和 JS 中存在一些错误。

• 没有结束文本区域标记，只是另一个文本区域元素(忘记了/)
• 您封装了一个匿名函数，但没有调用它(忘记了末尾的 ()，所以它不是 IIFE)

除此之外，还有一种简单的方法可以将 jQuery 添加到 iFrame:通过向 iFrame 添加 src 属性并将其指向另一个包含 jQuery 的 html 文件，就像当前的 html 文件一样。

如果你不想创建另一个文件，你可以通过 JS 添加 jQuery 文件，如下所示:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="js"></textarea>
<iframe id="inlineframe"></iframe>
<script>
  function runjs() {
    document
      .getElementById("inlineframe")
      .contentWindow.eval($("#js").val());
  }
  (function() {
    $("#js").on("keyup", runjs);
  })();

  const iFrameHead = document.getElementById("inlineframe").contentDocument
    .head;
  const script = document.createElement("script");
  script.src =
    "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js";
  iFrameHead.appendChild(script);
</script>