Question

我正在玩弄HTML和Javascript中的一些基本结构（即，我是一个HTML / Javascript n00b），并且有一个功能我似乎无法正确实现。简而言之，我想从HTML页面的主体中获取文本并使用Javascript（eval（）或new Function（））对其进行评估。为了看到我对eval（）的使用是正确的，我首先尝试了以下代码，它按预期工作（并显示值5）：

<script>
window.onload = function () {
    eval("var t = function () { if (5>0) return 5; }();");
    document.body.innerHTML = t;
}
</script>

但是，当我尝试实现从HTML中获取“代码”并运行它的目标时，这对我来说似乎失败了。这是一段不起作用的代码（我尝试过很多变种）：

<script>
window.onload = function() {
    var x = document.getElementById("myP").innerHTML;
    eval("var e = " + x + ";");
    document.body.innerHTML = e();
}
</script>

<body>
    <p id="myP">function () { if (5>1) { return 5; } } </p>
</body>

我测试过变量x确实包含了正文中所需的“代码”。但由于某种原因，上述情况将无法正常运作;它只会显示正文并在更新innerHTML后忽略eval和语句。

更奇怪的是，当我尝试“更复杂”的代码时，它运行正常，例如：

<script>
window.onload = function() {
    var x = document.getElementById("myP").innerHTML;
    eval("var e = " + x + ";");
    document.body.innerHTML = e();
}
</script>

<body>
    <p id="myP">function () { var a = []; var b = [1,2,3]; for (var i in b) { a.push([b[i],'q']); } return a; } </p>
</body>

对我而言，这个例子应该有效而不是之前的例子似乎很奇怪; eval（）讨厌if语句吗？我错过了eval（）的一些微妙方面吗？我错过了一些超级基本的Javascript语法吗？在获得上述特定实例的工作中，以及如何实现我一般要做的事情的建议，即将任何代码从HTML传递给eval（）时，任何帮助都表示赞赏。

注意：如果可能，请避免任何有关eval（）如何“邪恶”或是主要安全问题或任何此类言论的评论/答案。我知道这些担忧。我的问题是在个人项目的背景下，没有机会被公开部署或不安全地使用等。

Answer 1

这里的问题与DOM有关，而不是JavaScript。你要求节点的innerHTML。如果你看看你最终得到的问题变得清晰：

var x = document.getElementById("myP").innerHTML;
console.log(x); // "function () { if (5&gt;1) { return 5; } }"

浏览器已将>字符转换为HTML实体。您需要的是节点的textContent：

var x = document.getElementById("myP").textContent;
console.log(x); // "function () { if (5>1) { return 5; } }"

这是working example。

在HTML Text上使用Javascript的eval（）

1 个答案: