Кросс-браузерный JavaScript
JavaScript используется для доступа к CSS свойствам элементов страницы и изменеия их значений. Однако синтаксис, распознаваемый Netscape 4.0 и IE 4.0 отличаются. Дабы знать, где собака порылась где кроется это различие, я покажу вам простой способ создания кросс-браузерных скриптов, написанных на JavaScript, которые будут работать и в Netscape 4.0 и в IE 4.0.
Проверка кросс-браузерности
Прежде всего мы должны узнать, каким браузером пользователь просматривает страницы. Небольшой фрагмент кода будем стандартной проверкой браузера почти во всех примерах рассылки:
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
Объект document.layers специфичен для Netscape 4.0, а document.all, соответственно, -для IE 4.0. Таким образом, обычной проверкой существования объекта мы создаем переменные типа boolean: ns4 (для Netscape 4.0) and ie4 (для Internet Explorer 4.0). Значения этих переменных принимают зачения true или false в зависимости от используемого браузера. Тепер, как только вы захотите проверить браузер, вы вставляете в JavaScript проверку if (ns4) или if (ie4). Например:
function check() {
if (ns4) {
// do something in Netscape Navigator 4.0
}
if (ie4) {
// do something in Internet Explorer 4.0
}
}
Использование JavaScript и CSS-P
Допустим, у нас имеется DIV таг следующего вида:
<DIV ID="blockDiv" style="position:absolute; left:50; top:100; width:30;"> <IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0>
</DIV>
Не забываем, что это пример. А значит, blockDiv может быть переименован во что угодно и новый код будет работать по такому же принципу, что и приведенный здесь.
Для Netscape типичный способ доступа к CSS-P свойствам такой: document.blockDiv.propertyName или document.layer["blockDiv"].propertyName
Для Internet Explorer немного другой:blockDiv.style.propertyName
илиdocument.all["blockDiv"].style.propertyName
где propertyName - одно из свойств перечисленных в прошлом выпуске: width, height и так далее.
Сейчас мы введём дополнительную переменную-указатель, которая позволит оптимизировать дальнейший код:
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
Теперь переменная block может использоваться для доступа к свойствам DIV тага в обоих браузерах одинаково. Например, если вы хотите получить левую координату DIV тага, то вы можете просто написать block.left.
Пример полностью
Этот пример показывает как можно получать свойства left, top и visibility элемента, расположенного на страничке.
Скрипт:
<SCRIPT LANGUAGE="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
}
//-->
</SCRIPT>
HTML:
<BODY onLoad="init()">
<A HREF="javascript:alert(block.left)">left</A> -
<A HREF="javascript:alert(block.top)">top</A> -
<A HREF="javascript:alert(block.visibility)">visibility</A>
<DIV ID="blockDiv" style="position:absolute; left:50px; top:100px; width:30px; height:30px; clip:rect(0px 30px 30px 0px); background-color:red; layer-background-color:red;">
</DIV>
</BODY>
Важно! Функция init() вызывается в BODY таге на событие onLoad="", то есть выполняется сразу после того, как загрузится вся страница, и DIV таг существует. Если вы попробуете выполнить этот скрипт перед полной загрузкой страницы, вы получите JavaScript ошибку вроде "block is not defined" (block не определён).
Различия
Если вы попробуете этот пример в Netscape и в IE, то получите два разных результата:
| Свойство | Результат в Netscape | Результат в Internet Explorer |
|---|---|---|
| left | 50 | 50px |
| top | 100 | 100px |
| visibility | show | visible |
Эти различия могут быть причиной некоторых проблем, но в следующих выпусках мы поговорим, как обойти их.
По мотивам http://www.jalix.org/ressources/internet/dhtml/_dynduo/dynduo/en/javascript.html
0 коммент.:
Отправить комментарий