web-dev-qa-db-ja.com

jquery html（）はスクリプトタグを削除します

ページのdivのコンテンツを、ajax呼び出しの結果のhtmlで置き換える必要があります。問題は、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-HTMLのスクリプトタグはjQueryによって解析され、実行されません

しかし、これは結論です。そこで提案された解決策を試しましたが、どれも機能しません。

編集：私はその古いトピックに基づいて回避策を見つけたようですが、それはきれいではありません。

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

簡単な方法があるはずです。

jqueryhtmlajaxtags
29
brpaz

編集：私は疲れていて、考えていません。 .html()の代わりに、ネイティブのinnerHTMLメソッドを使用できます。

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

元の答え：

含まれているスクリプトは<script>タグと</script>タグの間のスクリプトコンテンツではなくsrc属性を使用して呼び出されるため、リンクした回答が機能しないのが私の勘です。これはうまくいくかもしれません：

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

    }
});

これは何もテストされておらず、赤ちゃんを食べる可能性があることに注意してください。

27
eyelidlessness

私は同じ問題を抱えていましたが、それを簡単に修正することができない多くの問題がありました。しかし、私は解決策を見つけました：

これは私の疑似ソース（HTML）であり、私はできませんでした何らかの方法で変更します。

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

このHTMLページを取得するために$.get()を使用しました。コードを文字列として取得したので、今度はjQueryでコードを検索します。私の目的は、DIV _<script>_に属しているが_identifier2_には属していない_identifier1_- Tag内のJavaScriptコードを分離することでした。だから私が欲しかったのは結果文字列としてのbar(456)です。理由により、jQueryはすべてのスクリプトタグを取り除いているため、次のようにcannotで検索できます。

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

解決策は簡単な回避策です。最初に、すべての_<script>_- Tagを_<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)
_

簡単なハックですが、うまくいきます！

3
Fidelis

これが最も簡単な解決策です。

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

これにより、スクリプトタグが;）に保持されます。

1
Peter Hrebik