javascript - 通过 AJAX 以 JSON 格式返回的动态生成的 Javascript 在附加时将不会执行

Question

我有一个网页，可以向 PHP 脚本发出 AJAX 请求。该 PHP 脚本使用有效的 JSON 对象进行响应，并将 Content-type header 设置为 application/json。

JSON 格式如下(由 console.log(JSON.stringify(data)) 报告，其中 data 是 JSON 响应):

{
    "content": "<script type=\"text/javascript\">console.log(\"test\");</script>"
}

然后，我创建一个具有“content”类的 div(记住 data 是我的 AJAX responseText JSON 对象):

var content = document.createElement("div");
content.setAttribute("class", "content");
content.innerHTML = data.content;

最后，我将内容 div 附加到我网站上的现有 div。

existingDiv.appendChild(content);

我在 Google Chrome 开发者工具的 elements 选项卡中检查了源代码，因为它很好地显示了什么是实际的 DOM 节点，什么只是文本。脚本 block 显示为 DOM 节点。

遗憾的是，该脚本未执行 - console.log("test"); 未将 test 输出到开发人员工具控制台。

到目前为止我看到的唯一选择是使用eval()，我试图像瘟疫一样避免它。另外，我的内容可能不仅仅包含脚本 block 。它还可以包含其他 HTML 标记。

我错过了什么？我如何才能执行这个动态添加的 Javascript block ？

jQuery 解决方案是可以接受的。

Answer 1

一个可能的解决方案是使用new Function():

$(document).ready(function(){
   var script = "window.alert('hi')";
   new Function(script)();
});

至于为什么你的脚本没有执行，是@Pointy建议的(但不完全+一种规避方法)，如以下代码所示:

<script type='text/javascript'>
$(document).ready(function()
{
    $("<script type='text/javascript'>window.alert('hi');<\/script>").appendTo(document.body); // this will work

    var container = document.createElement("div"); // this won't work
    container.innerHTML = "<script type='text/javascript'>window.alert('hi');<\/script>";
    document.body.appendChild(container);

    var script = document.createElement("script"); // this will
    script.innerHTML = "window.alert('hi');";
    document.body.appendChild(script);
});
</script>

编辑:添加了请求的单元测试:http://jsperf.com/eithed-hvsa