Кроссбраузерный DHTML

задано допустимое свойство position):

Если в MSIE 4+ можно вызвать слой "cool" через do*****ent.all["cool"], то в Netscape 4 do*****ent.layers["cool"] вернет undefined. Для вызова вложенного слоя придется написать такую конструкцию:

do*****ent.layers["mylayer"].do*****ent.layers["cool"]

То же самое касается и адресации других объектов, находящихся внутри слоя - картинок, форм, ссылок и т.д.

Стало быть, нашу функцию можно модернизировать таким образом:

//рекурсивный поиск по слоям
function findLayer(what, where){
if(!where) return
var i,l,parent
var len=where.length
for(i=0;iparent=where[i].do*****ent.layers
l=parent[what]
if(l) return l
l=findLayer(what, parent)
}
return false
}

function layer(layerName, parentLayerName){
if(do*****ent.getElementById) return do*****ent.getElementById(layerName)
if(do*****ent.all) return do*****ent.all[layerName]
if(do*****ent.layers){
if(parentLayerName){
return findLayer(layerName, eval(parentLayerName))
}else{
return findLayer(layerName, do*****ent.layers)
}
}
}

Теперь мы можем обратиться к нашему слою "cool" так: layer("cool","mylayer") или вообще layer("cool"), но последний вариант будет более "тормозным", т. к. компьютеру придется обходить всё дерево слоев до искомого. Похожее соображение приводит к тому, что логично единожды вызвать слой - var mylayer=layer("xxx"), а потом использовать переменную mylayer для дальнейшей работы со слоем.

С картинками, вставленными в слой, в Netscape 4 дело обстоит так же. Картинки в слое не входят в коллекцию do*****ent.images[] корневого документа, они принадлежат коллекции do*****ent.images[] этого слоя. Пример - у нас есть слой "layer", в нем есть картинка "image". Чтоб поменять у этой картинки src, пишем:

do*****ent.layers["layer"].do*****ent.images["image"].src="file.jpg"

Доступ к CSS-свойствам слоя (расположение, видимость и т.д.) также по-разному осуществляется в разных браузерах. В MSIE 4 и DOM1-браузерах доступ к свойству осуществляется через объект .style. Пример (используется уже определенная нами функция вызова слоя):

// спрятать слой в MSIE4 и DOM1-браузерах
layer("mylayer").style.visibility="hidden"

В Netscape 4 у слоя нет поля style, доступ к свойствам осуществляется непосредственно:

// спрятать слой в Netscape 4
layer("mylayer").visibility="hide"

Можно заметить, что даже значение, которое нужно присвоить свойству .visibility, разное у разных браузеров. Хотя более новые версии 4-ого Netscape поддерживают не только "show"/"hide", но и "visible"/"hidden", как и MSIE.

Для доступа к стилям можно порекомендовать такую функцию:

function layerStyle(layerObject){
if(layerObject.style) return layerObject.style //доступ через style
return layerObject //доступ без style
}

Вместе с которой наш пример сократится до layerStyle(layer("mylayer")).visibility=isNetscape4?"hide":"hidden"

Надо, правда, отметить, что приведенный мной пример выглядит несколько громоздким. Это связано с тем, что он, не обладая большой практической пользой, призван лишь проиллюстрировать работу со слоями в разных браузерах. Но вы можете познакомиться с более аккуратно написанной мною же объектно-ориентированной библиотекой DHTML-функций KLayers.

Хочу повторить, что доступ к CSS-свойствам по-разному осуществляется в разных браузерах.

Позволяет сделать только часть слоя видимой. Может применяться для эффектов "распахивания", "выползания" или "скроллинга".

Для реализации прокручиваемого текста в новых браузерах (MSIE, Mozilla, Opera) удобно применять css-свойство overflow: hidden. Можно создать блок с overflow: hidden и фиксированными размерами, а внутрь его вложить другой блок, который и будем прокручивать. Для прокрутки достаточно менять ему .style.left и top (или .style.pixelLeft, pixelTop в Opera). В Netscape 4, само собой разумеется, для прокрутки слоя придется пользоваться свойством clip.

У слоев есть свойства, которые не определяются CSS. Это, к примеру, получившиеся габариты слоя, которые зависят от количества текста, помещенного в нем. Обращаться к этим свойствам надо минуя .style, т. е. просто layer.свойство.

Пример:

// Y-координата верха слоя
function getLayerTop(layer){
if(isMSIE || isOpera5 || isMozilla){
return layer.offsetTop
}else if(isNetscape4){
return layer.pageY
}
}

В DOM1-браузерах (MSIE, Opera, Mozilla) в случае вложенных слоев, т. е. когда слой вложен в другой слой, координаты .offsetLeft и .offsetTop отсчитываются относительно родительского слоя. Для получения ссылки на родительский элемент существует свойство .offsetParent. Можно пройтись по цепочке offsetParentов, суммируя их координаты, пока не дойдем до самого верхнего родителя - do*****ent.body.

В MSIE 4 не следует вызывать .innerHTML до наступления onload страницы.

В Netscape 4 есть глюк с записью русских букв в слой. Они превращаются либо в символы кодировки western, либо в знаки вопроса ("?????"). Решение этой проблемы может быть достигнуто через использование загрузки в слой другого документа (см. далее). В слой загружается документ с корректно выставленным charset, а потом в него печатается через do*****ent.write нужный текст.

В Netscape 4 слои имеют атрибут и свойство src, а также метод .load(url). Это позволяет записывать в слой содержимое любого документа.

В MSIE и Mozilla вместо этого есть тег