Кроссбраузерный DHTML - Компьютерная документация по Windows. Оптимизация Windows.
 Компьютерная документация по Windows. Оптимизация Windows.  Компьютерная документация по Windows. Оптимизация Windows. Поиск
  Здравствуйте  [ Новый пользователь ] Домой  .  Статьи по темам  .  Компьютерная документация  .  Личный кабинет  .  Toп 10  .  Карта сайта  

  Навигация

 Главная   Главная
 Главная   Магазин софта
 Темы новостей   Темы новостей
 Топ 10   Топ 10
 Архив новостей   Архив новостей
 Карта сайта   Карта сайта
 Конструктор   Конструктор
 Обзоры   Обзоры
 Интересное   Интересное
 Рассылка новостей   Рассылка новостей
    Полезные ресурсы
 Пользователи   Пользователи
 Поиск   Поиск
 Написать нам   Написать нам
 Тест скорости   Тест скорости


  Наши темы
Windows 8
Windows 7
Windows Vista
Windows XP
Настройка Windows
Реестр Windows
Восстановление системы
MS-DOS
BIOS
Интернет
Microsoft Office
Сетевые настройки
Обработка видео
Вебмастеру
Оптимизация Windows
Обзор софта
Технологии, обзоры
Обзоры компьютеров и комплектующих
Рецензии
Полезные советы
Продвижение сайтов

Новые обзоры

Как заработать на ремонте компьютеров

Переработка отходов электроники

Типовые неисправности I:Phone, Pad, Pod и Macbook

Место для вашей электронной души

Ремонт компьютеров в Москве


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

Размещено 29/01/2007

Вебмастеру Автор: Сергей Круглов
Источник: www.woweb.ru
Начинающие веб-программисты рано или поздно сталкиваются с тем, что их скрипт, любовно написанный (или позаимствованный) и прекрасно работающий на домашнем компьютере с MSIE 5.5, почему-то не работает у соседа или клиента на его Opera, Mozilla или Netscape.

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



Оглавление
Определение браузера

Браузеров и их версий довольно много, но многие из них не различаются между собой пониманием DHTML. Поэтому есть смысл разбить их на несколько групп, названных по наиболее распространенному представителю. Проверять на принадлежность к той или иной группе будем через поддержку испытуемым браузером тех или иных объектов:

isDOM=do*****ent.getElementById //DOM1 browser (MSIE 5+, Netscape 6, Opera 5+)
isMSIE=do*****ent.all && do*****ent.all.item //Microsoft Internet Explorer 4+
isNetscape4=do*****ent.layers //Netscape 4.*
isOpera=window.opera //Opera
isOpera5=isOpera && isDOM //Opera 5+
isMSIE5=isDOM && isMSIE //MSIE 5+
isMozilla=isNetscape6=isDOM && !isMSIE && !isOpera //Mozilla или Netscape 6.*

Последняя строчка спорна, т. к. не обязательно все, что не Опера и не MSIE - Mozilla. Однако если появятся браузеры, которые не совместимы ни с MSIE, ни с Opera, то с чем же им еще быть совместимыми, как не с Mozilla (Netscape 6)? Больше не с кем. Для особо ответственных случаев, когда надо наверняка отбросить все неизвестные браузеры, можно воспользоваться тем, что все современные Mozillы содержат в navigator.appName строчку "Netscape", т.е.

isMozilla=isNetscape6=isDOM && (navigator.appName=="Netscape")

Окна и документы
В разных браузерах по-разному вызываются такие свойства, как размеры окна, размеры документа, показатели прокрутки и т.д.

Размеры рабочей области окна
  • MSIE 4+ - do*****ent.body.clientWidth, clientHeight
  • Netscape, Mozilla, Opera - innerWidth, innerHeight
Координаты верхнего левого угла окна
  • MSIE 4+ - screenLeft, screenTop
  • Netscape, Mozilla, Opera - screenX, screenY>
Размеры содержимого документа
  • MSIE 4+ - do*****ent.body.scrollWidth, scrollHeight
  • Netscape, Mozilla - do*****ent.width, height
  • Opera - do*****ent.body.style.pixelWidth, pixelHeight
Прокрутка (scrolling)
  • MSIE 4+ - do*****ent.body.scrollLeft, scrollTop
  • Netscape, Mozilla, Opera - pageXOffset, pageYOffset
В MSIE в документе должен присутствовать тег , иначе do*****ent.body не будет определено.

ФормыДоступ к формам
В MSIE такой код прекрасно работает:




......
myform.mytext.value="hello"

Но в 4-ом Netscape этот код выдает ошибку. Там нельзя так обращаться к формам. Необходимо писать do*****ent.myform.mytext.value="hello" - это будет работать и там, и там. Чтобы избежать возможных конфликтов имени формы с другими объектами do*****ent лучше писать do*****ent.forms.myform.mytext.value или do*****ent.forms["myform"].elements["mytext"].value. Последняя запись рекомендуется в случаях, когда имя формы или ее элемента могут содержать недопустимые для имени переменной в JavaScript символы.

Формы и Mozilla
В Mozilla лучше не обращаться к элементам страницы (особенно формам) до наступления события onload.

и NetscapeВ Netscape у объекта select нет свойства value. Для выбора нужного option пользуйтесь проверкой select.options[n].value и установкой соответствующего select.selectedIndex. Пользоваться select.options[n].selected=true/false не рекомендуется из-за проблем с Opera (см. далее). и Opera
В Opera старых версий (напр. 5.10, в отличие от, к примеру, 5.12) нельзя выбрать опцию select через select.options[n].selected=true. Вместо этого нужно писать select.selectedIndex=n.

Картинки
Доступ с картинкам, т. е. объектам, создаваемым тегом , осуществляется через коллекцию do*****ent.images[]. Но у Netscape 4 есть особенность в вызове картинки, если она вставлена в слой (см. ниже).

Слои
Если в MSIE 4+ и Mozilla (он же Netscape 6) слоем может быть любой элемент страницы, то в Netscape 4 и Opera 5 это обычно контейнер
с определенным стилями absolute или relative расположением. Некоторые рекомендуют использовать в Netscape 4 тег , т. к. он лучше понимается Нетскейпом. Поэтому те случаи, когда
и в 4-ом Netscape ведут себя по-разному, возможно, я рассмотрю в одной из будущих статей. Но эти случаи достаточно редки и специфичны и связаны с глюками в форматировании содержимого слоев.

В Netscape 4 не используйте в именах классов (class=) и идентификаторов (id=) символ подчеркивания "_", в противном случае Netscape не увидит этого элемента.

Доступ к слою
Доступ к слоям по-разному осуществляется в разных браузерах. А именно:

  • MSIE 4+ - do*****ent.all[layerName]
  • Netscape 4 - do*****ent.layers[layerName]
  • DOM1 (MSIE 5+, Mozilla, Opera 5) - do*****ent.getElementById(layerName)
Можно порекомендовать такую функцию:

function layer(layerName){
//DOM1
if(do*****ent.getElementById) return do*****ent.getElementById(layerName)
//MSIE4
if(do*****ent.all) return do*****ent.all[layerName]
//Netscape 4
if(do*****ent.layers) return do*****ent.layers[layerName]
//неподдерживаемый браузер
return null
}

С доступом к слоям в Netscape 4 имеется один аспект. От связан с вложенными (nested) слоями, т. е. со слоями, которые описаны внутри контейнеров другого слоя. Пример (предполагается, что в CSS для тегов
задано допустимое свойство position):

xxx

Если в 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-свойствам слоя
Доступ к 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-свойствах
Хочу повторить, что доступ к CSS-свойствам по-разному осуществляется в разных браузерах.

Видимость слоя (visibility)
  • MSIE, Opera, Mozilla - .visibility="visible"/"hidden" (видимый/спрятанный)
  • Netscape 4 - .visibility="show"/"hide"
Цвет фона слоя
  • MSIE, Mozilla, Opera 6 - .backgroundColor="ЦВЕТ" (напр. "red","#ffee15")
  • Netscape 4 - .bgColor="ЦВЕТ"
  • Opera 5 - .background="ЦВЕТ" (работает только в том случае, если изначально через CSS для слоя был указан какой-либо фоновый цвет)
Фоновое изображение у слоя
  • MSIE, Mozilla, Opera 6 - .backgroundImage="url(url картинки)"
  • Netscape 4 - .background.src="url картинки"
Обрезка слоя (clip)
Позволяет сделать только часть слоя видимой. Может применяться для эффектов "распахивания", "выползания" или "скроллинга".

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

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

Текущие координаты верхнего левого угла слоя на странице
  • MSIE, Opera, Mozilla - .offsetLeft, offsetTop (только для чтения)
  • Netscape 4 - .pageX, pageY (можно изменять, двигая слой абсолютно, т. е. относительно окна, а не родительских элементов, если такие есть)
Пример:

// 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, Mozilla - .offsetWidth, offsetHeight
  • Netscape 4 - .do*****ent.width, height
  • Opera - .style.pixelWidth, pixelHeight
Изменение содержимого слояЗапись в слой
  • MSIE, Mozilla - .innerHTML=текст
  • Netscape 4 - .do*****ent.open()
    .do*****ent.write(текст)
    .do*****ent.close()
  • Opera - невозможно
В MSIE 4 не следует вызывать .innerHTML до наступления onload страницы.

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

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

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

 



Компьютерная документация по Windows Copyright © 2008-2019