Итак, мы увидели, что каждый браузер имеет свои особенности. А так ли это важно? Очень важно. Загрузив Web-страницу со сценарием, в котором содержатся не поддерживаемые браузером свойства, пользователь попросту не увидит ваш замысел. Существуют два подхода к решению проблемы совместимости браузеров. Первый подход немного утомительный. Разработчик пишет два варианта для разных браузеров и затем, на основе полученной информации, направляет пользователя на нужную Web-страницу. Вот небольшой пример такого сценария (листинг 1).
Листинг 1. Перенаправление пользователя на нужную Web-страницу
<script type = "text/javascript">
var ver = navigator.appVersion;
if (ver.indexOf("MSIE") != -1)
{
alert ("У вас запущен Internet Explorer");
// window.location.href="ie.htm";
}
else
alert ("У вас запущен Firefox");
// window.location.href="firefox.htm";
</script>
Я привел упрощенный сценарий, сделав допущение, что в мире существуют только два браузера. В реальной жизни, конечно, потребуется доработка; кроме того, у рассмотренного сценария есть один недостаток — требуется создание дополнительных Web-страниц под разные браузеры. Второй подход — использование оператора условия if. Рассмотрим на примере, для чего воспользуемся свойством appName. У Internet Explorer при вызове данного свойства возвращается строка Microsoft Internet Explorer, у браузера Mozilla Firefox — Netscape (листинг 2).
Листинг 2. Другой способ определения браузера
<script type = "text/javascript">
var errorText = 'Не могу определить глубину цвета';
if (navigator.appName.indexOf('Netscape') != -1)
if (navigator.appVersion.substr(0, 1) > 3)
document.write('Глубина цвета: ' + window.screen.pixelDepth)
else
document.write(errorText);
if (navigator.appName.indexOf('Microsoft') != -1)
if (navigator.appVersion.substr(0, 1) > 3)
document.write('Глубина цвета: ' + window.screen.colorDepth)
else
document.write(errorText);
</script>
<NOSCRIPT>
Увы, ваш браузер не поддерживает выполнение сценариев,
поэтому я не могу определить настройки вашего монитора.
</NOSCRIPT>В этом примере сначала определяется название браузера, затем его версия, после чего, с помощью поддерживаемых свойств, выводится информация. Как видно из этого сценария, у Netscape Navigator для определения глубины цвета монитора используется свойство pixelDepth, а у Internet Explorer свойство colorDepth.
ПРИМЕЧАНИЕ
Хорошая новость для разработчиков. Браузер Mozilla Firefox поддерживает оба эти свойства.
Обратите внимание, что нам нет острой необходимости помнить всю возвращаемую строку. С помощью функции indexOf мы определяем позицию в строке одного слова. Этого вполне достаточно, чтобы сценарий был работоспособным. Только не забывайте, что не только Mozilla Firefox имеет имя приложения Netscape. Существует, к примеру, еще и браузер Netscape Navigator (есть ли еще есть???).
Хотя мы с вами договорились, что в моем блоге все примеры тестируются только на Internet Explorer и Mozilla Firefox, я все-таки приведу небольшой пример определения версии используемого браузера. Немного теории. Написать полностью универсальную функцию, определяющую браузер, установленный у пользователя, невозможно. Слишком много их развелось, и у каждого разработчика браузера свое видение объектной модели. Можно остановиться только на самых популярных и пренебречь остальными.
Итак, Internet Explorer используют в своей модели конструкции типа document.aii, а Netscape Navigator — document.layers. Обе эти конструкции не являются стандартом, поэтому избегайте их использования на своих Web-страницах. Старые версии браузера Opera тоже грешили нестандартной конструкцией document.aii.item. Но последние версии всех этих браузеров сделали шаг вперед и поддерживают правильную конструкцию document.getEiementByid (Mozilla Firefox изначально пытался следовать стандартам). Поэтому во многих сценариях используется приблизительно такой код (листинг 3).
Листинг 3. Еще один пример определения браузеров
var bNN4 = document.layers;
var bIE4 = document.all && document.all.item;
// проверка поддержки document.all.item необходима для отсечения Opera
var bW3CDOM = document.getElementById;
var bDOMBrowser = bNN4 || bIE4 || bW3CDOM;Я привел только маленький кусочек кода сценария. Применение этого кода в реальной программе останется вам в качестве домашнего задания.
