19 августа 2009, 7:37

Javascript: Емулируем прототип для IE (Element.prototype в ИЕ)

Как всем известно, в нашем «дорогом» ИЕ версий ниже 8, нету поддержки Element.prototype (а также HTMLElement, Node, Object), образно говоря, ИЕ просто ложил на стандарты, у него свой путь, и зачем им вообще был этот «стандарт» %)

Исходя из предыдущей моей статьи, нужно как-то заставить понимать этого ирода ;) нашу надстройку над прототипом.

Так как ИЕ довольно «гибкий» браузер, мы его будем учить этому стандарту. Для начала мы просто создадим функцию Element, и через прототайп добавим нужную нам функцию
if (typeof(Element) != "object") {
	Element = function () {};
}
	
Element.prototype.pSib = function() { 
	var node = this; 
	while (node = node.previousSibling) { 
		if (node.nodeType != 3) return node; 
	} 
	return null; 
}
И наши приключения только начались, ибо в ИЕ всё также пСиб не работает.

Следующий танец, это танец с бихейворами, или проще говоря css приблудами ИЕ, так называемыми файликами *.htc, ибо возможности раньше добавить паблик метод в старых ИЕ нету, всё обусловлено «архитектурой».
<PUBLIC:COMPONENT>
    <PUBLIC:METHOD NAME="pSib"
           INTERNALNAME="_pSib" />
    <script type="text/javascript">
        var el = new Element;
        _pSib = el.pSib;
    </script>
</PUBLIC:COMPONENT>
Не забываем подключить наш бихейвор
<!--[if lte IE 7]>
    <style type="text/css">
        * { behavior: url(test.htc); }
    </style>
<![endif]--> 
И что всё? А фигли ;)))

Дальше будет универсальная функция, которая добавит нашу функцию прототипа ко всем HTML-элементам (Только для ИЕ)
var __IEcreateElement = document.createElement;
document.createElement = function (tagName) {
    var element = __IEcreateElement(tagName);
    var interface = new Element;
    for (method in interface)
        element[method] = interface[method];
    return element;
}	
Образно говоря, мы расширяем ИЕ-метод createElement, нашим функционалом. Желательно запихать функцию под кондишинал комментс, или в ИФик где создаётся функция Element.
Вот и всё, поздравляем Вас, наш прототип для ИЕ работает, гип-гип ;) УРА!

1 комментарий РСС

Егор
При большом кол-ве тегов на странице этот метод заметно тормозит. Моя страница, на которой, конструкция
<div>
<h3>some</h3><img.. />
<div>
<p>some</p><p>some</p>
</div>
<div><ul class=«..»>
<li>some</li><li>some</li><li>some</li>
</ul>
<ul>
<li>some</li><li>some</li>
</ul></div>
</div>
повторенная всего лишь 60 раз, заставляет страницу грузится около 5 секунд (на Core 2 Duo !!!). Это происходит из-за того, что дополнительная функция описанная в *.htc файле добавляется к каждому элементу уже после полной загрузки DOM-дерева, путем простого обхода все элементов.
Вывод — IE даже со своими собственными разработками гумно!

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter