jquery html() 去掉脚本标签 [英] jquery html() strips out script tags

问题描述

我需要将页面中 div 的内容替换为 ajax 调用产生的 html.问题是 html 中有一些必要的脚本，似乎 jquery html() 函数将它们剥离出来，我需要过滤响应，只得到一个特定的 div.

I need to replace the content of a div in my page with the html resultant from an ajax call. The problem is that the html have some necessary scripts in it and it seems that jquery html() function stripts them out, I need to filter the response and only get a specific div.

我正在考虑一种解决方法，即从 ajax 响应中提取所有脚本标签，然后将它们附加到 DOM 中，但我在这样做时遇到了麻烦.

I am thinking on a workaround which is to extract all the script tags from the ajax response and then append them do the DOM but i am having trouble doing that.

这是我的代码；

   $('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 - 脚本标签在 HTML 中被 jQuery 解析出来并且不被执行

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

but the is any conclusion. I tried the solutions suggested there but none of them work.

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

I seem to found a workaround based on that old topic but it´s not pretty;

  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);
                });

一定有一个简单的方法.

There must be a easy way.

推荐答案

我累了，没有思考.您可以只使用本机 innerHTML 方法而不是 .html():

I'm tired and not thinking. You can just use the native innerHTML method instead of .html():

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

<小时>

原答案:

---

Original answer:

我的直觉是您链接的答案对您不起作用，因为包含的脚本是使用 src 属性调用的，而不是 <script> 和 </script> 标签.这可能有效:

My hunch is that the answer you linked doesn't work for you because the included scripts are called with a src attribute rather than script content between the <script> and </script> tags. This might work:

$.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());

    }
});

请注意，这尚未经过任何测试，可能会吃掉婴儿.

Note, this has not been tested for anything and may eat babies.

这篇关于jquery html() 去掉脚本标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！