ExtJs4 + IE9 = Объект не поддерживает свойство или метод 'createContextualFragment'

Question

Я работаю с ExtJs на IE9 .. и я почти всегда получаю эту ошибку ..

Ошибка выполнения Microsoft JScript:

Объект не поддерживает свойство или метод 'createContextualFragment'

Какую дозу это значит? Для чего нужен createContextualFragment? И как это исправить?

Answer 1

createContextualFragment() - это метод Range объектов, который создает фрагмент документа из строки HTML. Он присутствует в Firefox, WebKit и Opera, но в настоящее время нестандартен (он не входит в спецификацию DOM Level 2 Range , но находится в стадии разработки Спецификация синтаксического анализа и сериализации DOM ) и IE 9 не реализовали его, что согласуется с общим подходом Microsoft к реализации стандартных функций в IE 9, который ранее отсутствовал в IE. ExtJs должен использовать этот метод, хотя довольно глупо, поскольку он нестандартный, и тот же результат может быть легко достигнут с помощью innerHTML, который поддерживается везде.

UPDATE

В IE 9 можно добавить следующее: оно позволяет расширять прототипы хост-объектов, чего не было в предыдущих версиях. Ниже приведена наивная реализация createContextualFragment(), адаптированная из моей библиотеки Rangy , но подходящая для большинства применений. См. этот выпуск Rangy для получения подробной информации и для более тщательной реализации.

Обратите внимание, что это не будет работать в IE <9, потому что эти браузеры не имеют реализации DOM Range. </p>

if (typeof Range.prototype.createContextualFragment == "undefined") {
    Range.prototype.createContextualFragment = function(html) {
        var startNode = this.startContainer;
        var doc = startNode.nodeType == 9 ? startNode : startNode.ownerDocument;
        var container = doc.createElement("div");
        container.innerHTML = html;
        var frag = doc.createDocumentFragment(), n;
        while ( (n = container.firstChild) ) {
            frag.appendChild(n);
        }
        return frag;
    };
}

Answer 2

Быстрее, плотнее, без зацикливания, работает в IE9 + и во всех браузерах без дерьма:

var createContextualFragment = (function(){
  var doc = document.implementation.createHTMLDocument(''),
      range = doc.createRange(),
      body = doc.body;
  return function(html){
    body.innerHTML = html;
    range.selectNodeContents(body);
    return range.extractContents();
  }
})();

Answer 3

extjs 3.4.0 исправляет эту проблему. Не нужно менять код, бейд. Хорошая работа над библиотекой.

Answer 4

Ну, с небольшим изменением, код, опубликованный Тимом Дауном, сработал для меня:

if (typeof Range.prototype.createContextualFragment == "undefined") {
    Range.prototype.createContextualFragment = function (html) {
        var doc = window.document;
        var container = doc.createElement("div");
        container.innerHTML = html;
        var frag = doc.createDocumentFragment(), n;
        while ((n = container.firstChild)) {
            frag.appendChild(n);
        }
        return frag;
    };
}

Answer 5

Я только что применил исправление Тима Дауна к нашей установке ext 3.3.1, потому что IE9 все еще не отображает наши страницы правильно без него.Другими словами, я не думаю, что это исправление вошло в EXTJS 3.3, по крайней мере, в публичную версию.

Answer 6

Это уже исправлено в Ext JS 3.3 IIRC, и я предполагаю, что это будет исправлено в 4.0 до финальной версии (на момент написания этой статьи даже не было бета-версии).