0

AJAX 呼び出しの後に、サーバーから HTML 応答が返される状況があります。特定の要素とその子を取り出して、DOM に挿入する必要があります。

現在、私の AJAX コールバックは次のようになっています。

var onSuccess = function (rawData) {
    var rawData = $(rawData);
    var data = rawData.find("#foo");
    $("#bar").append(data);
};

要素#fooが含まれていない限り、これは正常に機能します。<script>いろいろ調べた結果、最初のステップで問題が発生することがわかりました。

var rawData = $(rawData);

HTML を jQuery に渡すと、すべての<script>要素が元のコンテキストから取り出され、トップレベルになります。後続の要素は、既に別の場所に移動されているため.find("#foo")、以前にネストされた要素を移動できませんでした。<script>

生の HTML を DOM に直接挿入するとすべて正常に動作しますが、私たちのシステムは古く、対象の要素だけに返されるものを制限する前に多くのマッサージが必要になるため、今のところ、できるようにする必要があります。応答全体をスキャンして、必要なものだけを取得します。それらの<script>要素が含まれています。

助言がありますか？

【追記】ご協力ありがとうございました。

最終的に、このソリューションを自分のニーズに合わせて調整し、AJAX 成功のコールバックを次のようにしました。

var onSuccess = function (rawData) {
  var data = $(rawData);
  var scripts = data.filter("script[someAttribute='someValue']");
  var elementOfInterest = data.find("#foo"); // scripts above used to live in #foo
  $("#target").append(elementOfInterest);
  $("body").append(scripts);
};

これには、継承したいネストされたスクリプト要素に特別な属性を追加する必要があることに注意してください。

4

1 に答える 1

1

この関数は、html 文字列を受け取り、そこからスクリプトを取り除き、html をターゲットに追加してから、スクリプトを実行します。この関数をajaxと組み合わせてhtmlを取得すると、問題が解決するはずです。

function cleanInsert(html, target, filter) {
    var outHTML = html, $content = $(target);
    outHTML = outHTML.replace(/<script/ig, "<div class='iscript'").replace(/<\/script/ig, '</script');
    outHTML = $(outHTML);
    if (filter) {
        outHTML = filter.call(outHTML);
    }
    var scripts = outHTML.filter('div.iscript').detach();
    $content.html(outHTML);
    scripts.each(function() {
        var $this = $(this),
            s = document.createElement("script");
        if ($this.attr('src') != "") {
            s.src = $this.attr('src');
        } else {
            s.nodeValue = $this.text();
        }
        $content[0].appendChild(s);
    });
}​

使用法：

$.get("myurl.php",function(html){
    cleanInsert(html,"#bar", function(){
        return this.find("#foo");
    });
});

この関数は、history.js の例にあるコードを基にしています。

ただし、HTML に含まれるスクリプトは、<head></head>や の直接の子など<body>、トップ レベルであるか、トップ レベルの要素である必要があります。それが問題になる場合は、機能を調整して補正する必要があります。

更新:ああ、これは html 内のみが必要であることを考慮していません#foo。更新しました。

document.write()更新: 使用するスクリプトは、この機能やその他の html を追加する方法では正しく機能しないことに注意してくださいdocument.write()。

于 2012-06-07T21:04:28.443 に答える