web-dev-qa-db-ja.com

IE呼び出しによって挿入されたAJAX 8のHTML5要素を「有効にする」方法は？

質問の下部にある解決策を参照してください。

IE 8（およびそれ以前）は、未知の要素（つまり、HTML5要素）ではうまく機能しません。スタイルを設定したり、ほとんどの小道具にアクセスしたりすることはできません。たとえば、これに対する多数の回避策があります。 http://remysharp.com/2009/01/07/html5-enabling-script/

問題は、これがページの読み込み時に利用可能だった静的HTMLでうまく機能することですが、後でHTML5要素を作成すると（たとえば、AJAX呼び出し、または単にJSで作成））、これらの新しく追加された要素を、HTMLUnknownElement（IEデバッガー内）で想定されているようにHTMLGenericElementとしてマークします。

誰かがその回避策を知っているので、新しく追加された要素はIE 8によって認識/有効化されますか？

これがテストページです：

<html><head><title>TIME TEST</title>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>

<body>
    <time>some time</time>
    <hr>
    <script type="text/javascript">
        $("time").text("WORKS GREAT");
        $("body").append("<time>NEW ELEMENT</time>"); //simulates AJAX callback insertion
        $("time").text("UPDATE");
    </script>
</body>
</html>

IE：UPDATE、およびNEW ELEMENTが表示されます。他の最新のブラウザでは、UPDATE、およびUPDATEが表示されます。

javascriptjqueryajaxinternet-explorerhtml
28
Gidon

iE7のすべてのhtml5の問題については、 html5shiv を使用し、ajax呼び出しで返されるhtml5要素に対応するために innershiv を使用します。

これらの2つの小さなプラグインは、これまでのところ魅力のように機能しました。

--Praveen Gunasekara

25
Praveen

jQueryには、要素を作成するための暗くて魔法のような方法がいくつかあります。代わりに_document.createElement_を使用すると、すべての違いが生じるはずです。

_var time = document.createElement("time");
time.innerHTML = "WORKS GREAT";
document.appendChild(time);
_

HTML5とIEで.append()構文（_.innerHTML += ""_など）を使用できるとは思いません。問題は、IEがHTML5要素を使用または表示する機能ではなく、それらを解析する機能です。 HTML5要素をプログラムでインスタンス化するときはいつでも、必須 _document.createElement_でインスタンス化する必要があります。

4
mattbasta

AJAXを使用してサーバーからHTML5要素を含むHTMLの束をフェッチするときに、私も問題に遭遇しました。 html5shivは私の一日を救うことができませんでした。私のプロジェクトテンプレートは html5boilerplate に基づいており、 Modernizr を使用してIE <9のHTML5タグの動作を修正しています。このスレッドを読んだ後、予感がし、コードを機能させることができました。

絞りたてのHTMLをDOMに挿入する問題のあるコードは次のとおりです。

var wrapper = $('<div />')
    .addClass('wrapper')
    .html(data.html)
    .appendTo(wrapper);

基本的にここで起こることは次のとおりです。

  1. 新しい要素を作成する
  2. 新しい要素のinnerHTMLが更新されます
  3. innerHTMLを含む新しい要素がDOMの既存の要素に追加されます

次のように変更すると、問題が修正されます。

var wrapper = $('<div />')
    .addClass('wrapper')
    .appendTo(el);
wrapper.html(data.html);

今何が起こっているのか：

  1. 新しい要素を作成する
  2. 空の新しい要素がDOMの既存の要素に追加されます
  3. 新しく追加された要素のinnerHTMLが更新されます

今ではIE7でさえ、非同期でロードされたHTML5要素を私が望むように表示する以外に選択肢はありません:)

Julioに感謝します。将来必要になった場合に備えて、プラグインを手元に置いておきます。しかし今のところ、余分なDOM操作のオーバーヘッドを追加しないことを嬉しく思います。

たぶん、この回避策は他の人にも有効です。

2
jiggybit

innershiv機能は1.7以降jqueryに組み込まれていることに注意してください http://blog.jquery.com/2011/11/03/jquery-1-7-released/

2
schellmax

議論に貢献するためにこれを残すだけです。

スクリプトは、@ GidonがIE8で機能していないように見えることを提供しました（2つの異なるマシンでテスト済み）。別の方法でjQueryプラグインを作り直す必要がありました。以下を参照してください。

/**
 * Enable HTML5 Elements on the fly. IE needs to create html5 elements every time.
 * @author Gidon
 * @author Julio Vedovatto <[email protected]>
 * @see http://stackoverflow.com/questions/2363040/how-to-enable-html5-elements-in-ie-that-were-inserted-by-ajax-call
 */
(function ($) {
    jQuery.fn.html5Enabler = function () {
        var element = this;

        if (!$.browser.msie)
            return element;

            $.each(
                ['abbr','article','aside','audio','canvas','details','figcaption','figure','footer','header','hgroup','mark','menu','meter','nav','output','progress','section','summary','time','video'],
                function() {
                    if ($(element).find(this).size() > 0) {
                        $(element).find(this).each(function(k,child){
                            var el = $(document.createElement(child.tagName));

                            for (var i = 0; i < child.attributes.length; i++)
                                el.attr(child.attributes[i].nodeName, child.attributes[i].nodeValue);

                            el.html(child.innerHTML);

                            $(child).replaceWith(el);
                        });
                    }
                }
            );
    };
})(jQuery);
0
Julio Vedovatto