4

序文として、アプローチを根本的に変更することで、この問題はすでに解決したと述べておきます。しかし、それを解決する過程で、私は魅力的で悩ましいテスト ケースをまとめました。

AJAX 呼び出しから返された文字列があります。文字列には HTML が含まれていますが、そのほとんどは役に立ちません。DOM に挿入された文字列 (およびそのすべての子) から 1 つの要素が必要です。これのシミュレーションは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>wtf?</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function() {
            var markup = '<div class="junk"><div class="good"><time datetime="2013-03-29">March 29, 2013</time></div></div>',
                output = $(markup).find('.good').clone().wrap('<div />').parent().html();

            $('body').append(output);
        });
    </script>
</head>

<body></body>
</html>

このファイルのホストされたコピーがここにあります: http://alala.smitelli.com/temp/wtf_ie.html (永久にアップすることはありません)。

これが行うべき.goodことは、 div と子要素を抽出し、<time>それらを本文に挿入することです。.wrap().parent()子に加えて、選択した要素を抽出します (この質問を参照してください)。.clone()とは.html()、問題を示す工夫です。

ユーザーには、今日の日付が表示されます。また、Chrome、Firefox、IE9 などで動作します。

March 29, 2013

ただし、IE7 および 8 では、表示されるテキストは次のとおりです。

<:time datetime="2013-03-29">March 29, 2013

開口部<が示され、コロンが挿入されています。終了</time>タグは影響を受けないように見え、エスケープされていません。

何が起きてる？これはある種のバグですか、それとも予想される動作ですか? コロンはどこから来るのですか？

編集:追加document.createElement('time')またはhtml5shivの提案に関する限り、どちらも動作を変更していないようです。

4

1 に答える 1

2

非常createElement('time')に驚いたことに、マークアップを実際に解析するという点で方程式から jQuery を削除すると、shim/shiv がなくても (IE7 と IE8 の両方で) 問題が解決することがわかりました。

<!DOCTYPE html>
<html>
<head>
    <title>wtf?</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function() {
          var div, markup, output;

          markup = '<div class="junk"><div class="good"><time datetime="2013-03-29">March 29, 2013</time></div></div>';

          div = document.createElement('div');
          div.innerHTML = markup;

          output = $(div).find('.good').clone().wrap('<div />').parent().html();

          $('body').append(output);
        });
    </script>
</head>

<body></body>
</html>

ライブコピー| ソース

ここでの変更点は、jQuery に任せるのではなく、ブラウザ独自の処理innerHTMLと disconnected divto parse を使用することです。markup

したがって、これは、HTML5 要素をサポートしていない古いブラウザーでの jQuery による HTML フラグメントの処理に問題がある可能性があると言わざるを得ません。しかし、それは重要な主張であり、重要な主張には重要な証拠が必要です...

しかし、これらの行を変更すると:

div = document.createElement('div');
div.innerHTML = markup;

output = $(div).find('.good').clone().wrap('<div />').parent().html();

に：

div = $(markup);
output = div.find('.good').clone().wrap('<div />').parent().html();

問題が発生します (IE7 と IE8 の両方で): Live Copy | ソース

したがって、jQueryの問題のように見え始めます...

于 2013-03-29T18:36:41.373 に答える