Как заставить DHTML работать и в IE, и в Navigator

Уильям Роберт Стэнек (William Robert Stanek), PC Magazine

Обращение к объектам

IE4 при обработке и манипулировании динамическими веб-страницами поддерживает модель document object model. Каждый элемент веб-страницы представлен объектом, управляемым посредством сценариев. Простейшим способом доступа к объекту является использование его имени, присвоенного атрибутом ID. Чтобы обратиться к контейнеру <div id="abs">, созданному кодом на рис. 1, следует воспользоваться объектом abs.

Поставив в соответствие объекту его идентификатор в Internet Explorer, можно управлять его положением, выделением и другими характеристиками посредством соответствующего объекта стиля. Всеми динамическими изменениями объекта управляет сценарий. Контейнер abs можно двигать, присваивая новые значения параметрам его положения top и left, и менять его характеристики, манипулируя параметрами стиля. Например, положение контейнера abs по горизонтали можно изменить посредством объекта стиля abs.style.left следующим образом:

abs.style.left += 5;

<div id="layer1">
<div id="a"><p> Layer 1-A</p></div>
<div id="b"><p> Layer 1-B</p></div>
</div>

document.layers['layer1'].left += 5;
document.layer1.left += 5;

document.layers['layer1'].document.layers['a'].left += 5;
document.layer1.document.a.left += 5;
document.layers['layer1'].document.a.left += 5;

Так как атрибуты обращения к объектам в IE и Navigator отличаются, приходится прибегать к условным операторам, определяющим синтаксис в зависимости от браузера, при помощи которого просматривается страница. Один из способов определения типа браузера — это применение атрибута navigator.appName, проверяющего имя браузера, и атрибута navigator.appVersion, проверяющего его версию. Однако более надежным решением служит проверка поддерживаемых объектов. Объект document.layers поддерживает только Navigator 4.0 и выше, а объект document.all — только Internet Explorer 4.0 и выше, так что достаточно использовать условный оператор, который определяет наличие этих объектов и, в зависимости от результата, выбирает соответствующий синтаксис.

В примере на рис. 3 создается простая текстовая анимация с применением атрибутов object.style.left и document.object.left. Если обнаружен document.layers, используется синтаксис Navigator. Если обнаружен document.all, используется синтаксис IE. У object.style и document.object есть и другие важные атрибуты, которыми интересно манипулировать: bgcolor задает цвет фона, background — фоновое изображение, clip — обрамляющий прямоугольник, top — положение по вертикали, visibility показывает контейнер или скрывает его, а zIndex помещает контейнер перед элементами или за ними.

Обратите внимание на некоторые другие используемые в коде на рис.3 приемы DHTML, такие, как способ определения текущего положения контейнера. Если Navigator может получать координаты непосредственно, то Internet Explorer способен извлекать их только через функцию parseInt(). Заметьте также, что для запуска функции test() по окончании загрузки страницы используется событие onload. Пока синтаксический разбор элементов не закончен, они отсутствуют на веб-странице, поэтому необходимо дождаться onload или другого подобного события, гарантирующего, что браузер уже обработал элемент, которым вы намерены манипулировать.

Для более сложных манипуляций элементами потребуется обращение к объектам. В следующем примере создается ссылка на объект, называемый MyMove, которая затем применяется в нужной функции:

<!--
  function getReady() {
  if(document.layers) { MyMove = document.moving;
    } else if (document.all) { MyMove = moving.style; }
      test()
    }
    function test() {
      MyMove.left = parseInt(MyMove.left) - 3;
      if (parseInt(MyMove.left) < 0 ) { MyMove.left = 640 }
      setTimeout('test()',200);
}
-->

Эта замена делает код более наглядным и позволяет обращаться к соответствующему объекту из любой функции на странице без необходимости вновь и вновь прибегать к условным переходам. В новой функции все значения параметров позиционирования уже обработаны. Это гарантирует правильность ее выполнения как в IE, так и в Navigator.

<html>
<head>
<script>
<!--
function getReady() {
 if(document.layers) { MyMove = document.moving;
 } else if (document.all) { MyMove = moving.style; }
 test()
}
function test() {
   MyMove.left = parseInt(MyMove.left) - 3;
   if (parseInt(MyMove.left) < 0 ) { MyMove.left = 640 }
   setTimeout('test()',200);
}
// -->
</script>
</head>
<body onload="getReady()">
<div id="moving" style="position: absolute; top: 100px; left: 50px; 
z-index: 2; height: 50px; width: 150px ">
<h1>Moving text is cool!</h1>
</div>
</body>
</html>

Copyright © 1997, 1998, 1999. ZDNet и Algorithm Media. Все права защищены. Воспроизведение материалов или их частей в любом виде и форме без письменного согласия запрещено. ZDNet и логотип ZDNet являются торговыми марками Ziff-Davis Inc.