Question

我正在使用jQuery处理单页面应用程序。整个html页面作为响应发送为浏览器作为ajax响应。

$.post(url, function (data) {

  $("#resp").html(data);

  $("#resp").find("script").each(function (i) {
                //alert($(this).text());
                eval($(this).text());
  });
});

如何从数据中删除脚本标签，然后将html分配给div？

我面临的问题是在响应页面中编写的脚本。他们最初没有被添加到DOM中，所以我使用了eval（），现在脚本在某些情况下会被添加两次。

Answer 1

最简单的方法是将.load()函数与片段选择器一起使用，因为这会在更新内容之前删除<script>标记并导致它们不被执行。如果您正在使用整个HTML页面，但可能没有合适的选择器供您使用。但是，我建议先试试这个：

$('#resp').load(url + ' body');

这样，您就可以获得通过AJAX请求的HTML页面中<body>和</body>标记之间的内容。

如果这不起作用，我想您可以尝试在添加到DOM之前手动从响应中删除<script>标记：

$.post(url, function(data) {
    var tempDiv = $('<div>').html(data).find('script').remove();
    $('#resp').html(tempDiv.html());
});

这会创建一个不属于文档的新<div>元素，将其HTML设置为来自AJAX请求的返回HTML，搜索其中的<script>元素，然后将其删除。但是，即使该元素还不是当前文档的一部分，脚本仍然可能最终被执行（我从来没有理由这样做，所以我没有测试过它。）

Answer 2

在安东尼回答的帮助下，这就是我为了让它发挥作用所做的事情：

$.post(url, function (data) {
    var tempDiv = $('<div>').html(data);
    var raw = $('<div>').html(data);
    $(tempDiv).find("script").remove();

    $("#resp").html(tempDiv.html());

    $(scripts).find("script").each(function (i) {
        //alert($(this).text());
        eval($(this).text());
    });
});

我无法理解为什么

var tempDiv = $('<div>').html(data).find('script').remove();

虽然没有工作。

从ajax响应数据中删除脚本标记

2 个答案: