Javascript узнать версию браузера. Определение браузера в JavaScript с примером кода

Итак, мы увидели, что каждый браузер имеет свои особенности . А так ли это важно? Очень важно. Загрузив Web-страницу со сценарием, в котором со­держатся не поддерживаемые браузером свойства, пользователь попросту не увидит ваш замысел. Существуют два подхода к решению проблемы совмес­тимости браузеров. Первый подход немного утомительный. Разработчик пи­шет два варианта для разных браузеров и затем, на основе полученной ин­формации, направляет пользователя на нужную Web-страницу. Вот небольшой пример такого сценария (листинг 1).

Листинг 1 . Перенаправление пользователя на нужную Web-страницу

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";

Я привел упрощенный сценарий, сделав допущение, что в мире существуют только два браузера. В реальной жизни, конечно, потребуется доработка; кроме того, у рассмотренного сценария есть один недостаток - требуется создание дополнительных Web-страниц под разные браузеры. Второй под­ход - использование оператора условия if . Рассмотрим на примере, для че­го воспользуемся свойством appName . У Internet Explorer при вызове данного свойства возвращается строка Microsoft Internet Explorer, у браузера Mozilla Firefox - Netscape (листинг 2).

Листинг 2. Другой способ определения браузера

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); Увы, ваш браузер не поддерживает выполнение сценариев, поэтому я не могу определить настройки вашего монитора.

В этом примере сначала определяется название браузера, затем его версия, после чего, с помощью поддерживаемых свойств, выводится информация. Как видно из этого сценария, у Netscape Navigator для определения глу­бины цвета монитора используется свойство pixelDepth , а у Internet Ex­plorer свойство colorDepth .

ПРИМЕЧАНИЕ

Хорошая новость для разработчиков. Браузер Mozilla Firefox поддерживает оба эти свойства.

Обратите внимание, что нам нет острой необходимости помнить всю воз­вращаемую строку. С помощью функции i ndexOf мы определяем позицию в строке одного слова. Этого вполне достаточно, чтобы сценарий был работоспо­собным. Только не забывайте, что не только 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).

Хорошо если ваш сайт работает во всех, или почти во всех браузерах так, как вы того хотите. Все меняется, выходят новые версии, появляются новые возможности, и глупо их не использовать, в угоду «старичкам». Года 1,5 назад IE 6.0 (судя по статистике посещений одного из моих сайтов) был на каждом третьем компьютере, использующем IE. Приходилось с ним считаться, т.к. IE доминировал на компьютерах — более 40% посетителей пользовались IE. Я связываю такое распространение IE 6.0 (не смотря на то, что уже вышла 8я версия), в первую очередь, с широким распространением старых пиратских версий Windows XP в России, которые не подключаются к серверу обновлений.

Сейчас активно устанавливают и более свежие версии XP (тоже почти везде пиратские), где уже в комплекте идет 7-я версия IE, и Windows 7, поставляемая с MSIE 8.0. Кроме того, IE пришлось потесниться, а на первое место вышла Opera (29,8% посетителей), а IE, потеряв более 10%, занимает 2-е место, набрав 28.8% от общего объема посетителей. При этом доля IE 6.0 в общем объеме пользователей IE сократилась с 34% до 15%. Замыкает тройку лидеров — FireFox.

Так образом, IE 6.0 сейчас пользуется каждый 20й пользователь (около 5%). С ними все ещё приходится считаться.

Это долгое вступление призвано показать, что вопрос о том поддерживать какие то версии браузеров или нет — серьёзный, требует периодических исследований, чтобы понимать какова текущая ситуация. Она будет разной для разных регионов, возможно даже будет зависеть от тематики сайта. Рано или поздно возникает идея сообщить пользователю, что мол, есть уже новые браузеры (пора ими начать пользоваться, дружок!).

Определить версию программы браузера, его семейство и предпринять какие то действия, вы можете как на стороне сервера, так и на стороне клиента. Для примера кусочек кода на javascript, позволяющий определить, что пользователь использует IE версии ниже чем 7.0

... function check_version() { //после загрузки документа, будет выполнена проверка версии браузера //и предприняты какие то действия ...

В PHP можно обратиться к заголовкам, передаваемым браузером, с помощью ф-ции getallheaders() , она вернет ассоциативный массив, где элемент будет содержать информацию о браузере.

Так мы выяснили, что путей как минимум — 2. Какой лучше? Я сторонник того, чтобы вся работа, которая не сопряжена с безопасностью, которая достаточно легко реализуема на стороне клиента — выполнялась на клиентской машине. В наше время чаще получается так, что ресурсы клиентских машин значительно превышают возможности виртуальных выделенных веб-серверов. Вот пусть они и работают по мере возможности:).

С другой стороны, у клиента вообще могут не работать javascripts и тогда выполнить проверку на сервере — единственный путь. Явление это очень редкое, хотя точной статистики у меня нет.

Есть тут и «подводные камни». Ведь если не принимать в счет мои личные предпочтения, то выполнить проверку на стороне сервера будет принципиально более верным подходом. Хотя бы потому, что определить версию браузера на некоторых старых клиентах, будет нельзя так, как я это показал в примере. И скрипт будет более сложным. Одним из подводных камней может оказаться система кеширования страниц сайта (как, например, у drupal). Один раз определив на стороне сервера, что клиент подходит или, наоборот, не подходит для отображения сайта, страница с данным результатом будет отображаться всем другим анонимным клиентам, пока не кончится время жизни кеша. В таких случаях уже javasctipt является единственным подходящим вариантом.

Внимай, даю установку: скрипты — это круто. Ты это знаешь, я это знаю, короче — мы это знаем. Установку дал! Успешно. Теперь о них — любимых скриптах — и поговорим. Приятно наваять своими ручками ка- кую-нибудь скриптятину на яве и дать соседу-ламаку пропереться, а по- ка тот будет ее разглядывать — дать ему пинка. Вот только бага: по ходу все клевое в скриптинге уже придумано. Предложить что-либо карди- нально новое (во всяком случае, мне) уже сложно, лучше пива попить пойти. С другой стороны, можно легко насочинять целый ворох вторич- ных вещей, которые при ближайшем рассмотрении сведутся к Нагромож- дению все тех же базовых методов. А это неправильно — вторичное само по себе на хрен никому не нужно. Наконец (не на конец, а в конце концов!)…

Внимай, даю установку: скрипты — это круто. Ты это знаешь, я это знаю, короче — мы это знаем. Установку дал! Успешно. Теперь о них — любимых скриптах — и поговорим. Приятно наваять своими ручками ка- кую-нибудь скриптятину на яве и дать соседу-ламаку пропереться, а по- ка тот будет ее разглядывать — дать ему пинка. Вот только бага: по ходу все клевое в скриптинге уже придумано. Предложить что-либо карди- нально новое (во всяком случае, мне) уже сложно, лучше пива попить пойти.

С другой стороны, можно легко насочинять целый ворох вторич- ных вещей, которые при ближайшем рассмотрении сведутся к Нагромож- дению все тех же базовых методов. А это неправильно — вторичное само по себе на хрен никому не нужно. Наконец (не на конец, а в конце концов!), наступило «творческое озарение»: если нельзя ничего выжать внутри документа, то надо перехо- дить на качественно новый уровень манипуляции самим окном броузера. Сначала чуть-чуть информации для тех, кто забыл (или не знал). В объектной модели современных броузеров (под современными я имею в виду Internet Explorer и Netscape Navigator) есть два очень интерес- ных метода: window.resizeTo (x,y) и window.moveTo (x,y), которые сулят просто огромные возможности. Первый метод изменяет размер «смотро- вого окна» броузера до указанных размеров (то есть х на у пикселей), а второй перемещает само окно, помещая левый верхний угол в точку с ко- ординатами х по горизонтали и у по вертикали. Таким образом, грамотно используя эти два метода, ты легко можешь добиться весьма интересных эффектов, которые буквально валят с ног неподготовленного зрителя.

Для начала давай рассмотрим простенький скриптик, отвечающий за перемещение окна броузера по десктопу и его отражение от «краев» экрана:

Окно в стиле Xenix

// Начинаем script блок function move_the_window(){ // Наша стартовая функция window.resizeTo(screen. width/2, screen, height/2);- // Сначала сжимаем окно до половины рабочего стола window.moveTo(1,1); // Теперь помещаем его в левый верхний угол экрана var x=1; // Это будет наша Х-координата. Вначале равна единице var y=1; // Это будет наша Y-координата. Вначале равна единице var dx=7; // Смещение по X var dy=10; // … и по Y move(); // Теперь вызываем функцию, которая и будет двигать окно function move(){ // .Объявляем функцию while(true){ // Объявляем бесконечный цикл if(x>=(screen.width) || x=(screen.height) || y javascript is cool! Как только страница полностью загружена, вызывается функция move_the_window. Она объявляет все необходимые переменные и помеща- ет окно в левый верхний угол рабочего стола. Методы screen.width и screen.height возвращают нам значения (ширину и высоту) рабочего сто- ла, и, уже зная их, мы сжимаем окно до половины.

Теперь приступим к функции move. Так как все действия здесь вы- полняются внутри бесконечного цикла, то окно так и будет безостановоч- но бегать по экрану.

Попытка же свернуть его через task manager Приведет к интересным визуальным эффектам (советую убедиться на собственном опыте). В случае, если ты хочешь, чтобы цикл выполнялся определенное количество раз, замени оператор while на while(var i < твое число) и добавь в конце цикла оператор i++. С помощью метода resizeTo можно делать довольно любопытные вещи. Посмотри, как можно сжать окно до размеров заглавной рамки и заставить все это, как обычно, бегать по экрану:

Развитие темы

// Начинаем script блок function move_the_windows(){ // Наша стартовая функция window. resizeTo(screen.width, 25); // Сжимаем окно номер 1 window.moveTo(0,1); // Теперь помещаем его в левый верхний угол экрана window2 = ореп(\»\», null); // Создаем объект второго окна window2.document.write(\» Window N2\»); // Пишем в не- го заголовок window2.resizeTo(screen.width,25); // Сжимаем его и window2.moveTo(0, screen.height-25); // помещаем в низ экрана var dy1=2; // Начальное смещение для верхнего окна var dy2=-2; // … и для нижнего var y1 = 1; // Y-координата верхнего окна var y2 = screen.height-25; // и Y-координата нижнего move(); // Теперь вызываем функцию, которая и будет двигать оба окна function move(){ // Объявляем функцию while(true){ // Объявляем бесконечный цикл if (y1>=(screen.height) || y1 =(screen.height) || y2