Как включить HTML5-элементы в IE 8, которые были вставлены вызовом AJAX?

См. решение в нижней части вопроса.

IE 8 (и ниже) не работает с неизвестными элементами (т.е. элементами HTML5), их нельзя стирать или получить доступ к большинству своих реквизитов. Для них это, например, множество работ: http://remysharp.com/2009/01/07/html5-enabling-script/

Проблема заключается в том, что это отлично работает для статического HTML, который был доступен при загрузке страницы, но когда после этого вы создаете элементы HTML5 (например, вызов AJAX, содержащий их или просто создавая с помощью JS), он будет отмечать эти новые добавленные элементы как HTMLUnknownElement как предполагается HTMLGenericElement (в отладчике IE).

Кто-нибудь знает об этом, так что новые элементы будут распознаны/включены 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 и UPDATE

ОТВЕТЫ

Ответ 1

для всех проблем html5 в IE7 я использую html5shiv и для размещения элементов html5, возвращающихся в вызовы ajax, я использую innershiv.

эти два небольших плагина работали для меня как шарм до сих пор.

- Правейн Гунасекара

Ответ 2

jQuery имеет несколько темных магических способов создания элементов. Использование document.createElement вместо этого должно иметь значение:

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

Я не верю, что вы можете использовать синтаксис .append() (например, .innerHTML += "") с HTML5 и IE. Проблема заключается не в возможности IE использовать или отображать элементы HTML5, это ее способность анализировать их. Каждый раз, когда вы программно создаете экземпляр элемента HTML5, вы должны сделать это с помощью document.createElement.

Ответ 3

Я тоже столкнулся с трудностями при наборе кучи HTML, содержащего элементы HTML5 с сервера, используя AJAX. html5shiv не смог спасти мой день. Мой шаблон проекта основан на html5boilerplate и использует Modernizr для исправления поведения тегов HTML5 в IE < 9. После прочтения этой темы я получил догадки и сумел заставить мой код работать.

Проблемный код, вводящий свежевыжатый HTML в DOM, был:

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

В основном, что происходит здесь:

  • создать новый элемент
  • обновлен innerHTML нового элемента
  • новый элемент с его innerHTML добавляется к существующему элементу в DOM

Изменив его на следующие исправления, моя проблема:

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

Что происходит сейчас:

  • создать новый элемент
  • пустой новый элемент добавляется к существующему элементу в DOM
  • обновлен innerHTML нового добавленного элемента

Теперь даже у IE7 нет выбора, кроме как отображать асинхронно загруженные элементы HTML5, как я хочу, чтобы он:)

Спасибо Julio, будет поддерживать ваш плагин в случае необходимости в будущем. Но пока я рад, что не добавляю накладные расходы дополнительных манипуляций с DOM.

Возможно, это обходное решение работает и для некоторых других людей.

Ответ 5

Просто оставив это, чтобы внести свой вклад в обсуждение.

script при условии, что @Gidon, похоже, не работает в IE8 (тестируется на двух разных машинах). Мне пришлось переделать плагин 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/info/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);