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

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

28 голосов
/ 02 марта 2010

См. Решение внизу вопроса.

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

Ответы [ 5 ]

25 голосов
/ 07 июня 2010

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

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

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

4 голосов
/ 02 марта 2010

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

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

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

2 голосов
/ 18 ноября 2011

обратите внимание, что функциональность innershiv встроена в jquery с 1.7 http://blog.jquery.com/2011/11/03/jquery-1-7-released/

2 голосов
/ 30 июня 2011

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

Проблематичным кодом для вставки свежесжатого 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 так, как я хочу:)

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

Может быть, этот обходной путь работает и для некоторых других людей.

0 голосов
/ 16 февраля 2011

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

Скрипт при условии, что @Gidon, похоже, не работает в IE8 (протестировано на двух разных машинах). Мне пришлось переделать плагин jQuery другим способом, см. Ниже: 

/**
 * Enable HTML5 Elements on the fly. IE needs to create html5 elements every time.
 * @author Gidon
 * @author Julio Vedovatto <juliovedovatto@gmail.com>
 * @see /1973856/kak-vklychit-elementy-html5-v-ie-8-kotorye-byli-vstavleny-vyzovom-ajax
 */
(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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...