Сценарии, которые могут работать в разных браузерах

В настоящее время ежедневная численность работающих с Web составляет более 60 млн. человек, из которых 30-35% используют Internet Explorer, а 55-60% - Netscape Navigator. Поскольку эти браузеры занимают доминирующие позиции на рынке, наша цель - создать сценарии, которые будут восприниматься обеими системами. Для этого нужно использовать только общие элементы объектных моделей JScript и JavaScript . На первый взгляд все очень просто. Однако лишь очень немногие владельцы Web-узлов действительно понимают имеющиеся между JScript и JavaScript различия, и уж совсем мало таких, кто может четко обозначить то общее, что у них есть. Но теперь, имея на вооружении данные таблиц 2 и 3, можно приступать к составлению сценариев, которые будут работать в среде как Internet Explorer, так и Netscape Navigator.

При разработке необходимо помнить о постоянном совершенствовании спецификаций JScript и JavaScript. С выходом очередной версии Internet Explorer или Netscape Navigatorможно ожидать появления новых функций в соответствующем языке. Если вы хотите использовать конкретное свойство, присутствующее только в одной спецификации, необходимо, чтобы сценарий либо выда-вал сообщение о наличии функций, не предусмотренных в браузере пользователя, либо корректно работал в обоих браузерах.

Как это сделать? Секрет в том, чтобы организовать ветвление внутри сценария: первая ветвь команд будет исполняться браузером Internet Explorer, другая - Netscape Navigator . Поскольку до начала обработки любой функции браузер не проверяет ее на допустимость, наличие посторонних функций в сценарии не приведет к сообщению об ошибке. В примере показан прототип сценария, который я постоянно использую для Web-страниц; он не приостанавливает свою работу ни в среде Internet Explorer, ни Netscape Navigator . При изучении текста сценария вы можете видеть, как параметр Navigator. appName позволяет узнать имя браузера, чтобы затем передать управление соответствующей функции.

Пример 1

<SCRIPT LANGUAGE="JavaScript">

<!--

// присвоить значения переменным

browserName = ""

browserName = navigator.appName

function shield() {

if (browserName == "Microsoft Internet Explorer") {

ieCall()

}

else if (browserName == "Netscape") {

ncCall

}

else genCall()

}

function ieCall() {

// вставьте операторы и вызовы функций, предусмотренные для Internet Explorer и JScript

}

function ncCall() {

// вставьте операторы и вызовы функций, предусмотренные для Netscape Navigator и JavaScript

}

function genCall() {

// запасной вариант для других браузеров, "понимающих" сценарии JavaScript. Сюда рекомендуется вставлять наиболее общие операторы и вызываемые функции.

}

// -->

</SCRIPT>

Также можно предусмотреть выполнение функций, уникальных для конкретных версий браузеров. Для этого следует проверять имя браузера и сведения о его версии с помощью параметров Navigator.appName и Navigator.appVersion. Здесь перед вызовом нужной функции проверяются оба параметра. Однако текст сценария будет получаться более запутанным; один из способов его упрощения - брать имя браузера и данные о версии из параметра Navigator. userAgent, который содержит сводную информацию о браузере. В этом случае потребуется проверка только одного параметра вместо двух.

Кроме того, вы можете обеспечить, чтобы выполнялись только те сценарии, которые соответствуют конкретной версии JavaScript, предусмотренной браузером пользователя. Для этих целей применяется тэг SCRIPT, например:

<SCRIPT LANGUAGE="JavaScript">

<SCRIPT LANGUAGE="JavaScript1.1">

<SCRIPT LANGUAGE="JavaScript1.2">

Но учтите: поскольку Internet Explorer не различает версий JavaScript 1.1 или JavaScript 1.2, обычно лучше пользоваться функцией, продемонстрированная в приложение 4. Тогда браузеры любого типа, где предусмотрены сценарии JavaScript, сумеют извлечь максимум информации, содержа-щейся на вашей Web-странице.

При изучении работы этого сценария обратите внимание, что в Navigator сначала полностью загружается HTML-документ, а лишь потом начинается обработка сценария. В Internet Explorer, наоборот, сразу приступают к делу и сценарий начинает исполняться еще до того, как закончится загрузка всей страницы. Видно, что процедуры загрузки и отображения Web-страниц в браузерах Navigator и Internet Explorer работают по-разному: Navigator последовательно выводит элементы страницы по мере их получения, а Internet Explorer сначала строит структуру страницы, а затем начинает показывать ее элементы.

В примере 5 подробно описан пример, который работает в часто используемых браузерах.

Пример 5

<HTML>

<HEAD>

<SCRIPT>

<!-- hide //скрыть от старых браузеров

// присвоить значения переменным

var pos = 0; // начальная позиция

var move = true; // движение

var direction= false; // направление

var mie=false;

// проверяем браузер

if(navigator.appName.indexOf("Microsoft")!=-1)

{mie=true;}

// Функция отвечающая за движение и направление

function moveNclip() {

// перемещение вперед

if (move & direction ) {

pos-=1

if (pos < -986) move=false;

if(!mie) document.layers["clippingLayer"].layers["imgLayer"].top= pos; // обращение к вложенному слою imgLayeir

else document.all.imgLayer.style.pixelTop= pos; // обращение к стилю imgLayeir

}

// перемещение назад

if (!move & !direction ) {

pos+=1

if (pos > 200) move=true;

if(!mie) document.layers["clippingLayer"].layers["imgLayer"].top= pos;

else document.all.imgLayer.style.pixelTop= pos;

}

}

// Функция изменяющая движение и направление

function StopStart(par){

if (par == 0) {

direction= false;

move = false;}

if (par == 1) {move = false;

direction= true;}

if (par == 2) {

direction= true;

move = true;}

}

function DrowPicture(){

// если Netscape Navigator создаем слои

if(!mie){

s='<CENTER><ILAYER NAME="clippingLayer" CLIP="0,0,1000,185"><ILAYER NAME="imgLayer" TOP=0 LEFT=0>'

s+='<IMG NAME=davinci SRC="text1.gif"></ILAYER></ILAYER></CENTER>'

s+='<LAYER TOP=230 ><CENTER><FORM>'

s+='<INPUT TYPE="button" VALUE="<<" onClick="StopStart(0);">'

s+='<INPUT TYPE="button" VALUE="STOP" onClick="StopStart(1);">'

s+='<INPUT TYPE="button" value=">>" onClick="StopStart(2)"><p>'

s+='<INPUT TYPE="button" VALUE="CLOSE" onClick="window.close()"></FORM></CENTER></LAYER>'

}

// если Internet Explorer создаем стили

if (mie){

s='<CENTER><DIV ID="imgLayer" STYLE="position:absolute; top:0;"><IMG SRC="text1.gif"></DIV></CENTER>'

s+='<DIV ID="dummy" STYLE="position:absolute; top:185; left:0; height:800; background-color:bisque"></DIV>'

s+='<DIV ID="ButtonsForm" STYLE="position:absolute; top:220;" ><CENTER><FORM>'

s+='<INPUT TYPE="button" VALUE="<<" onClick="StopStart(0);">'

s+='<INPUT TYPE="button" VALUE="STOP" onClick="StopStart(1);">'

s+='<INPUT TYPE="button" VALUE=">>" onClick="StopStart(2)"><p>'

s+='<INPUT TYPE="button" VALUE="CLOSE" onClick="window.close()"></FORM></CENTER></DIV>'

}

document.writeln(s);

}

// -->

</SCRIPT>

</HEAD>

<BODY BGCOLOR="bisque" onLoad="setInterval('moveNclip()', 10);">

<SCRIPT>

DrowPicture();

</SCRIPT>

</BODY>

</HTML>

Практическое задание.

1. Создайте скрипт для проверки версии браузера.

2. Создайте скрипт для проверки текущей версии ОС.

3. Создайте скрипт для вывода текущего IP-адреса.

4. Результаты проверки выведите в сообщение, привязав скрипты к кнопке.

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

Контрольные вопросы.

1. В чем отличие выполнения скриптов в разных браузерах?

2. Почему некоторые браузеры не могут исполнить определенные скрипты?

3. Порядок выполнения скриптов в Internet Explorer.

4. Как избежать ошибок при загрузке страниц?

Дисциплина «Программное обеспечение компьютерных сетей» Специальность 230105

Лабораторная работа №8.

«Создание динамических стилей CSS».

Теоретическая часть.