Javascript eval() 并不总是处理附加到 div 内容的文本

Question

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

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

然而，innerHTML 没有运行 JS 中的 script 元素。为了评估它们，我使用

$("#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

Javascript eval() not always working on text appended to contents of a div