JavaScript Совместимость браузеров

Цель работы: освоить приёмы создания таких страниц, которые можно было бы просматривать браузерами разных типов.

Для разработчиков веб-сайтов было бы идеальным строгое соблюдение стандарта W3C DOM во всех типах и версиях браузеров. К сожалению, даже в самых последних версиях браузеров стандарт объектной модели поддерживается не полностью. В объектные модели браузеров вводятся объекты, события, свойства и методы, отсутствующие в стандарте. Поэтому создание страниц, правильно отображаемых браузерами разных типов, представляет собой очень сложную задачу. В самом простом случае сайт тщательно отлаживается только на браузере одного типа и одной версии, а пользователи всех других браузеров при открытии сайта получают предупреждение об отсутствии гарантий правильного отображения сайта. Такой подход вполне приемлем для информационной системы, используемой одной организацией, например, банком, имеющим свою сеть Интранет.

Свойства браузеров и объект Navigator

Данные о браузере хранит объект navigator. Чтобы вывести в окно браузера свойство appName (имя браузера), можно написать такой оператор:

document.getElementById("P1").innerHTML= "appName = " + window.navigator.appName 
//P1 – ID контейнера, в который будет выведено имя браузера

Если страница предназначена для выполнения только одним браузером, то можно при её загрузке проверять имя браузера (appName). Если браузер не подходит, то нужно предупредить пользователя о том, какой браузер необходим для просмотра этой страницы.

Задача 6.1. Напишите сценарий, выводящий в окно браузера следующие свойства объекта navigator:

appName,
appCodeName,
appVersion ,
userAgent,
browserLanguage,
cookieEnabled.

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

Задача 6.2. Напишите сценарий, который определяет имя браузера. Если загрузка произошла в любом браузере кроме Internet Explorer, то пользователь должен быть предупреждён о том, что страница правильно отображается только в браузере Internet Explorer. Поместите написанный сценарий в отдельный файл с расширением js. Скопируйте в свой каталог пример 2.3, который правильно отображается только в браузере Internet Explorer. Вставьте в скопированный пример тег <SCRIPT ... > для загрузки файла со скриптом. Проверьте пример в браузерах Internet Explorer и Mozilla.

Способы преодоления несовместимости браузеров

Способов создания сценариев, правильно выполняющихся во всех существующих браузерах, нет. Рассмотрим некоторые различия объектных моделей, используемых в браузерах Internet Explorer и Mozilla, и типовые приёмы учёта этих различий. Браузер Mozilla не поддерживает свойство innerText, поэтому для совместимости следует использовать более универсальное свойство innerHTML. В браузерах Internet Explorer и Mozilla используются разные модели события. В Internet Explorer объект event доступен как свойство объекта window (window.event). Объект window указывать не обязательно. Схема доступа к элементу, на котором произошло событие, выглядит так :

<BODY onclick=cl_b()> 
.......
....... 
<script>
.......
...... 
function cl_b() 
{ event.srcElement.style.background='AAAAFF' 
.......
.......

В приведённом примере меняется цвет фона того элемента, по которому щёлкнули мышкой. Эта схема доступа использована в примере 2.3.

В браузере Mozilla объект event передаётся в качестве параметра в функцию, обрабатывающую событие (пример 6.1). Вместо свойства srcElement для хранения объекта, с которым произошло событие, используется свойство target. Модель HTML-документа в стандарте W3C DOM строится в виде дерева, состоящего из узлов (node). Преимущественно используются узлы двух типов – узлы элементов и текстовые узлы. Узел элемента соответствует элементу документа, а текстовый узел – тексту, введённому между тегами элемента. Узел, содержащий другие узлы, называется родительским (parentNode). В родительском узле содержатся дочерние узлы. Текстовый узел всегда дочерний.

Пример 6.1.

<HTML> 
<HEAD> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<SCRIPT language="JavaScript" src="ProvBrowsMaz.js"> 
<SCRIPT> 
function colorch(col,evt) 
{ evt.target.style.color=col; } 
function cl_b(evt) 
{ var elem = (evt.target.nodeType== 3)? evt.target.parentNode : evt.target;
if(elem.style.background.substring(0,6)=='yellow') 
{ elem.style.background='#AAAAFF'; } 
else {elem.style.background='yellow';}} 
</script> 
</HEAD> 
<BODY onclick=cl_b(event) style="height:600px"> 
<P onmouseover="colorch('red',event)" 
onmouseout= "colorch('green',event)" ALIGN = 'CENTER' 
style = 'color:green'> 
ТЕКСТ, МЕНЯЮЩИЙ СВОЙ ЦВЕТ </P> 
<P>При наведении и снятии курсора заголовок меняет свойцвет.<BR> 
Щелчок по любому объекту меняет его цвет</p> < 
DIV style = "position :absolute;top:200;left:300;width:200;height:100; background-color:green;color:red"> <b>Контейнер</b> 
DIV</div> </BODY></HTML>

В примере 6.1 в функцию cl_b() передаётся только объект event, а в функцию colorch() – два параметра. Параметр event должен быть в списке параметров последним. Текстовый узел имеет свойство nodeType= 3. В примере меняется цвет фона родительского узла, содержащего текстовый узел.

Пример 6.1 легко переделать так,что он будет правильно выполняться в браузерах обоих типов (пример6.2). Изменения нужно внести только в сценарий. Для настройки на браузер служит функция brows(evt).

Пример 6.2.

<HTML> 
<HEAD><TITLE>Internet Explorer и Mozilla</TITLE> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<SCRIPT> 
functioncolorch(col,evt) 
{ e=brows(evt) 
  e.style.color=col; 
} 
function cl_b(evt) 
{ elem=brows(evt) 
  varx=""; 
  x=elem.style.background 
  if(x.substring(0,6) == 'yellow') 
  { elem.style.background = '#AAAAFF'; } 
  else 
  { elem.style.background = 'yellow';} 
} 
function brows(evt)//Настройка на браузер 
{ evt=(evt) ? evt:window.event; 
  if(evt.target) 
  { elem =(evt.target.nodeType ==3) ? 
  evt.target.parentNode :evt.target; 
  } 
  else elem= evt.srcElement; 
  return elem; 
} 
</script> 
</HEAD> 
<BODY onclick=cl_b(event) style="height:600px"> 
<P onmouseover="colorch('red',event)" onmouseout="colorch('green',event)" 
ALIGN= 'CENTER'style='color:green'> 
ТЕКСТ, МЕНЯЮЩИЙ СВОЙ ЦВЕТ 
</P><P>При наведении и снятии курсора заголовок меняет свой 
  цвет.<BR> 
Щелчок по любому объекту меняет его цвет</p> 
<DIV style= "position:absolute;top:200;left:300;width:200; 
height:100;background-color:green;color:red"> 
<b>Контейнер</b>DIV</div> 
</BODY> 
</HTML>

Задача 6.3. Измените примеры 2.3, 2.4 и 3.1 так, чтобы они правильно выполнялись не только в Internet Explorer, но и в Mozilla.

Следующая работа