Каков наилучший способ обработки тегов стилей при загрузке HTML с AJAX в IE 6 или 7?

Question

Наша инфраструктура AJAX работает так, что отправляет фрагмент HTML, который может содержать тег. Затем мы берем этот фрагмент HTML и устанавливаем его как innerHTML элемента. В IE 6/7 он, кажется, игнорирует теги, и поэтому возвращаемый HTML-код не оформлен должным образом.

Мне интересно, сталкивались ли другие люди с подобными проблемами, и если да, то как они справились с ними. Я знаю, что мог бы использовать библиотеку JavaScript (мы используем YUI) для динамического получения внешних таблиц стилей, поэтому я мог бы преобразовать это во внешнюю таблицу стилей. Просто интересно, есть ли другие способы исправить это.

Answer 1

Конечно, лучший метод - это чисто DOM-решение, т. Е. Использовать document.createElement для генерации всех элементов, возвращаемых сервером.

Однако, есть (конечно) взлом IE, чтобы обойти некоторые проблемы, представленные innertHTML. Вместо того, чтобы вставлять ответ прямо в DOM, сначала создайте элемент, добавьте его innerHTML, затем присоедините его к DOM.

function responseHandler(response) {
    var div = document.createElement('div');
    div.innertHTML = response.responseText
    document.getElementById('ZE_ELEMENT').appendChild(div);
}

Answer 2

Вы можете попробовать jquery empty().append() вместо использования html() или innerHTML для IE 6 в IE 8. Это работает для меня, загружая полный HTML-документ со встроенными стилями. Вот пример кода.

var url = "inline.html";
$.ajax({
    url: url,
    success: function (html) {
        $('#content').empty();
        $('#content').append(html);
    },
    error: function () { return null; }
});

Более подробную информацию можно найти в блоге Решение: встроенная проблема CSS и вызов Ajax с IE6 на IE8

Answer 3

Теги встроенного стиля должны быть распознаны. Блок таблицы стилей не будет, так как они загружаются во время начального отображения страницы.

Вы можете динамически добавлять классы к существующей таблице стилей, но вам придется проанализировать ваш HTML-фрагмент, чтобы захватить то, что там, и сделать это в сценарии.

см .: Полностью Pwn CSS с Javascript