Различия в IE и NC

Internet Exploter 6.0 (IE) и Netscape Communicator 4.0 (NC) по разному интерпретируют HTML 4.0. Поэтому прежде, чем рассматривать принципы создания Динамических HTML, рассмотрим основные отличия этих браузеров и как с ними бороться.

IE представляет слои с помощью CSS и тэга div, в то время как NC советует использовать изобретенный им тэг layer.

Например для IE:

<head>
<style type="text/css">
#loading {POSITION: absolute; TOP:0; LEFT:0; Z-INDEX: 80000; WIDTH: 100%; HEIGHT: 100%;}
</style>
</head>
<body>
<div id="loading">
<table width="100%" height="100%">
<tr><td align="center" valign="middle">
Еще немного и из-за поворота выглянет то, к чему Вы так стремились...
</td></tr>
</table>
</div>
</body>

а для NC:

<body>
<layer name="loading" left="0" top="0" z-index="80000" width="100%" height=100%">
<table width="100%" height="100%">
<tr><td align="center" valign="middle">
Еще немного и из-за поворота выглянет то, к чему Вы так стремились...
</td></tr>
</table>
</layer>
</body>

Тэг layer ничем не отличается от CSS, за исключением параметра source, с помощью которого можно указать внешний файл в котором хранится содержимое слоя. Если Вы не собираетесь поддерживать IE, лучше выбрать синтаксис NC. Это позволит строить сложные документы и не повторять во всех файлах стандартные слои, такие как навигационнфя панель или шапка страницы.

На этом проблемы совместимости не заканчиваются, а только начинаются. Классы JavaScript в IE и NC также реализованны по разному. Например, чтобы показать слой в NC надо сказать

document.layers["loading"].visibility="visible";

а в IE:

document.all["loading"].style.visibility="visible";

Наш урок носит обзорный характер, поэтому мы не будем подробно рассматривать все различия реализации языка. Посмотрим лучше, как решаются эти проблемы.

Как с ними бороться

Слава Netscape, в JavaScript есть пракрасная функция eval(). Она параметр в строку и интерпретирует ее так, как-будто это строка программы. Чтобы корректно спрятать слой как в IE, так и в NC необходимо написать следующую строку:

eval(layerRef+'["loading"]'+styleSwitch+'.visibility="visible"');

Теперь все, что остается, это правильно инициализовать переменные layerRef и styleSwitch с помощью следующего кода:

var layerRef="null", styleSwitch="null";

function init(){
  if (navigator.appName == "Netscape") {
    layerRef="document.layers";
    styleSwitch="";
  }else{
    layerRef="document.all";
    styleSwitch=".style";
  }
}

Вызвав его в тэге body:

<body onload="init();">

wm-help.net -> Статьи из журнала -> Программирование -> Различия в IE и NC -> Версия для печати

Различия в IE и NC

Как с ними бороться