为什么浏览器不解析 AJAX 加载的文件中的 JS 代码？

Question

我有 2 个文件，第一个文件有一些 HTML 和一部分 JS。第二个文件是主文件，它通过 XmlHttpRequest 加载第一个文件。

第一个文件是这样的：

<div>
  My HTML contents
</div>

<script id="my_js_block">
function my_function() {
  alert(9);
}
</script>

第二个文件是这样的：

<div id="div_ajax_content">
  &nbsp;
</div>

<script>
function load_ajax_content() { 
  //synchronously with XmlHttpRequest(...,...,false);
  //...load and throw the first file into 'div_ajax_content'
}

load_ajax_content();
my_function();  <-- fails here
</script>

如何解决这个问题？

Answer 1

在 Kolink 之后，我发现了一个非常有趣的方法，但它确实有效！

load_ajax_contents();
eval(document.getElementById("my_js_block").innerHTML);
my_function();

但是，为了使这些函数由 'eval()' 全局进行评估，第一个文件中的所有函数都必须声明为变量，如下所示：

//this works!
my_function = function() {
  alert(9);
}

而不是：

//this makes the function nested in the context where eval() is called
function my_function() { 
  alert(9);
}

也不是：

//this makes the variable local to the context where eval() is called
var my_function = function() {
  alert(9);
}

Answer 2

Ajax 是异步的。您的代码尝试在 XMLHttpRequest 完成之前调用 my_function()。改为这样做：

<script>
function load_ajax_content() {
    //...load and throw the first file into 'div_ajax_content'
    // then,
    my_function();
}

load_ajax_content();
</script>

---

好的，现在您的 ajax 调用是同步的。可以解析返回的 HTML 中的<script> 标签，分别处理，但并不美观：

function load_ajax_content() {
    //...load and throw the first file into 'div_ajax_content'
    // then grab the script nodes one-by-one
    var scriptElts = document.getElementById('div_ajax_content').getElementsByTagName('script'),
        scriptElt,
        propName; // http://www.quirksmode.org/dom/w3c_html.html#t07

    if (scriptElts.length) {
        propName = scriptElts[0].textContent ? 'textContent' : 'innerText';
    }

    for (var i=0; i<scriptElts.length; i++) {
        scriptElt = document.createElement('script');
        scriptElt[propName] = scriptElts[i][propName];
        document.body.appendChild(scriptElt);
    }

    // finally,
    my_function();
}

...或者您可以使用像 jQuery 这样的库，它会自动为您处理这个确切的问题（以及许多其他问题！）。

Answer 3

通过 innerHTML 添加脚本不会运行该脚本。因此您的函数没有被定义，因此失败。

相反，我建议分别加载 HTML 和 JS，并使用 DOM 方法附加 JS 以将 <script> 标记放在页面上，或 eval() 执行返回的文件内容。