Question

我需要用ajax调用的html结果替换页面中div的内容。问题是html中有一些必要的脚本，似乎jquery html（）函数将它们删除，我需要过滤响应，只得到一个特定的div。

我正在考虑一种解决方法，即从ajax响应中提取所有脚本标记，然后将它们附加到DOM中，但我无法做到这一点。

这是我的代码;

   $('a.link-vote').live('click',function(){
        var idfeedback = $(this).attr('id').split('-')[1];
        var href = $(this).attr('href');
        $('.feedback-' + idfeedback + '-loader').show();
        $.ajax({
            type: "POST",
            url: href,
            success: function(response){
               var x = $(response).find('#feedback-'+ idfeedback).html();
               $('.feedback-' + idfeedback + '-loader').hide();
               $('#feedback-'+ idfeedback).html(x);

            }
        });
        return false;
    });

我找到了这个老话题： jQuery - script tags in the HTML are parsed out by jQuery and not executed

但是有任何结论。我尝试了那里建议的解决方案，但没有一个有用。

编辑：我似乎找到了一个基于那个旧主题的解决方法，但它并不漂亮;

  var dom = $(response);
                // var x = $(response).find('#feedback-'+ idfeedback).html();
                $('.feedback-' + idfeedback + '-loader').hide();
                //$('#feedback-'+ idfeedback).html(x);

                $('#feedback-'+ idfeedback).html(dom.find('#feedback-'+ idfeedback).html());

                dom.filter('script').each(function(){
                    var obj = $(this);
                    $('#feedback-'+ idfeedback + ' .feedback-comments').append(obj);
                });

必须有一个简单的方法。

Answer 1

编辑：我累了，不思考。您可以使用原生innerHTML方法代替.html()：

$('#feedback-' + idfeedback)[0].innerHTML = x;

原始答案：

我的预感是您链接的答案不适合您，因为使用src属性调用包含的脚本，而不是<script>和</script>标记之间的脚本内容。这可能有效：

$.ajax({
    url: 'example.html',
    type: 'GET',
    success: function(data) {

        var dom = $(data);

        dom.filter('script').each(function(){
            if(this.src) {
                var script = document.createElement('script'), i, attrName, attrValue, attrs = this.attributes;
                for(i = 0; i < attrs.length; i++) {
                    attrName = attrs[i].name;
                    attrValue = attrs[i].value;
                    script[attrName] = attrValue;
                }
                document.body.appendChild(script);
            } else {
                $.globalEval(this.text || this.textContent || this.innerHTML || '');
            }
        });

        $('#mydiv').html(dom.find('#something').html());

    }
});

请注意，这还没有经过任何测试，可能会吃掉婴儿。

Answer 2

我有同样的问题，但有更多问题，我无法轻易解决。但我找到了解决方案：

这是我无法以任何方式更改的伪源（HTML）。

<html>
  <body>
    <div id="identifier1">
      <script>foo(123)</script>
    </div>
    <div id="identifier2">
      <script>bar(456)</script>
    </div>
  </body>
</html>

我使用$.get()来获取此HTML页面。现在我将代码作为字符串，现在是时候用jQuery搜索它了。我的目标是，将<script> - 标签内的Javascript代码隔离到DIV identifier2，而不是identifier1。所以我想得到的是bar(456)作为结果字符串。由于这个原因，jQuery剥离了所有脚本标签，你不能再这样搜索：

var dom = $(data); //data is the $.get() - Response as a string
var js = dom.filter('div#identifier2 script').html();

解决方案是一个简单的解决方法。在开始时，我们会将所有<script> - 标签替换为<sometag>：

var code = data.replace(/(<script)(.*?)(<\/script>)/gi, '<sometag$2</sometag>');
var dom = $(code);
var result = dom.find('div#identifier2 sometag').html(); 

//result = bar(456)

这是一个简单的黑客，但它确实有效！

Answer 3

这是最简单的解决方案：

var keepScripts;
keepScripts = true;
$.parseHTML(yourHtmlString, keepScripts);

这会将脚本标签保留在;）

Answer 4

尝试

$('#feedback-'+ idfeedback).empty().append(response);

我没有测试过。不确定.html()是否真的剥离了<script>，但请尝试一下。

Answer 5

~~你能告诉我结果html结构吗？~~

更新2010/11/03

您可以使用正则表达式从<script>结果中删除.html()代码从你的第一个代码开始，在这一行之后。

var x = $(response).find('#feedback-'+ idfeedback).html();

你可以这样做。

x = x.replace(/\n/g, '{n}')
.replace(/<script.*?<\/script>/g, '')
.replace(/{n}/g, '\n');

jquery html（）删除脚本标记

5 个答案: