Javascript eval() 并不总是适用于附加到 div 内容的文本

Question

我使用AJAX将动态内容加载到#main_content元素:

var con = document.getElementById('main-content');
con.innerHTML = xhr.responseText;

但是，innerHTML script中不运行JS元素。为了评估它们，我使用

$("#main-content").find("script").each(function(i) {
  eval($(this).text());
  console.log($(this).text);
});

我加载的页面之一具有以下内容 <script>被执行并按预期工作的元素:

<!-- AJAX response -->
<script>alert(123);</script>

但是，如果我在 AJAX 请求中定义函数，当我尝试调用它们时，它们会显示为未定义:

<!-- AJAX response -->
<script>
function func() {
  alert(123);
}
</script>

我不知道为什么第一个 <script>元素被评估并执行，而第二个元素则没有。它们都被同一个函数调用来加载和评估 div 的内容。

Answer 1

问题在于，在非严格模式下，全局变量由 direct eval call 求值成为调用eval范围的局部变量:

var code = "var foo = 123";
(function() {
  eval(code); // direct call
  foo; // 123
})();
foo; // ReferenceError: foo is not defined

在严格模式下有一些restricctions ，因此该变量也不是在本地范围内创建的。

相反，如果您希望变量成为全局变量，则可以使用间接 eval 调用:

var code = "var foo = 123";
(function() {
  window.eval(code); // indirect call
  foo; // 123
})();
foo; // 123

这在 10.4.2 - Entering Eval Code 中有解释。 .