0

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

JSON 格式如下（由console.log(JSON.stringify(data))where datais JSON response 报告）：

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

然后我用“内容”类创建一个 div（记住data是我的 AJAX responseText JSON 对象）：

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

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

existingDiv.appendChild(content);

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

不幸的是，脚本没有被执行——console.log("test");没有输出test到开发者工具控制台。

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

我错过了什么？如何让这个动态添加的 Javascript 块执行？

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

4

3 回答 3

1

设置.innerHTML不评估<script>标签；这不是浏览器所做的。

如果您需要返回要执行的 JavaScript，最好将其作为字符串（不带<script>标签）发送，以便您可以轻松地将其传递给eval().

编辑如果您使用 jQuery 执行此操作而不是直接设置innerHTML（即，如果您使用$(something).html()），并且您将内容直接添加到 DOM 中的某些内容（即，不仅仅是已实例化但未附加到 DOM 的元素），然后 jQuery 会主动查找并提取您的<script>内容并对其进行评估。

于 2013-02-08T14:06:50.573 回答
1

使用$.getScript()简单、可缓存、直接：

http://api.jquery.com/jQuery.getScript/

（显然，您必须修改生成包含 jscode 和更改标头的 json 的服务器脚本）

于 2013-02-08T14:11:02.197 回答
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

于 2013-02-08T14:27:06.123 回答