javascript - 从 AJAX 响应中提取和执行脚本

Question

我的 AJAX 响应返回如下内容：

<div>
..
</div>

<script type="text/javascript">
..
</script>

<script type="text/javascript">
..
</script>

<div>
..
</div>

我想从脚本标签执行脚本（应该跨浏览器工作）并将文本（div）插入到页面之后。

Answer 1

您的script标签不需要type="text/javascript"跨浏览器兼容性的属性。

你的 JavaScript 将从上到下执行。因此，先出现的脚本将首先执行。最后添加文本插入，如下所示：

HTML：

<div id="myDiv"></div>

JavaScript：

document.getElementById("myDiv").innerHTML = "hello";

Answer 2

从 ajax 响应中提取脚本通常是不好的做法（缓存、安全性......）。最好处理在 ajax 响应中返回的数据 (JSON)。考虑使用 JQuery 或其他框架，因为它们提供跨浏览器功能和内置的 DOM 操作。

请参阅以下 DOM 操作示例：

$(document).ready(function() {
  var $grouplist = $('#groups');
  $.each(myData, function() {
    $('<li>' + this.name + '</li>').appendTo($grouplist);
  });
});

@http ://jsfiddle.net/qmacro/NJMyD/

如果您想在没有框架的情况下保留本机功能，则 javascript 提供了可能依赖于浏览器的本机 dom 操作功能。

当您向<javascript>正文添加新元素时，它应该自动注册。

Answer 3

谢谢大家。我创建了这样的解决方案：

var scripts = [];
$(response).each(function(key, element){
    if ($(element).is('script')) {
        scripts.push(element.innerHTML);
    } else {
        $('test').append($(element));
    }
});
$.each(scripts, function(key, element){
    eval(element);
});