Итак, мы увидели, что каждый браузер имеет свои особенности . А так ли это важно? Очень важно. Загрузив 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 Explorer свойство 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).
Внимай, даю установку: скрипты — это круто. Ты это знаешь, я это знаю, короче — мы это знаем. Установку дал! Успешно. Теперь о них — любимых скриптах — и поговорим. Приятно наваять своими ручками ка- кую-нибудь скриптятину на яве и дать соседу-ламаку пропереться, а по- ка тот будет ее разглядывать — дать ему пинка. Вот только бага: по ходу все клевое в скриптинге уже придумано. Предложить что-либо карди- нально новое (во всяком случае, мне) уже сложно, лучше пива попить пойти. С другой стороны, можно легко насочинять целый ворох вторич- ных вещей, которые при ближайшем рассмотрении сведутся к Нагромож- дению все тех же базовых методов. А это неправильно — вторичное само по себе на хрен никому не нужно. Наконец (не на конец, а в конце концов!)…
Внимай, даю установку: скрипты — это круто. Ты это знаешь, я это знаю, короче — мы это знаем. Установку дал! Успешно. Теперь о них — любимых скриптах — и поговорим. Приятно наваять своими ручками ка- кую-нибудь скриптятину на яве и дать соседу-ламаку пропереться, а по- ка тот будет ее разглядывать — дать ему пинка. Вот только бага: по ходу все клевое в скриптинге уже придумано. Предложить что-либо карди- нально новое (во всяком случае, мне) уже сложно, лучше пива попить пойти.
С другой стороны, можно легко насочинять целый ворох вторич- ных вещей, которые при ближайшем рассмотрении сведутся к Нагромож- дению все тех же базовых методов. А это неправильно — вторичное само по себе на хрен никому не нужно. Наконец (не на конец, а в конце концов!), наступило «творческое озарение»: если нельзя ничего выжать внутри документа, то надо перехо- дить на качественно новый уровень манипуляции самим окном броузера. Сначала чуть-чуть информации для тех, кто забыл (или не знал). В объектной модели современных броузеров (под современными я имею в виду 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. Так как все действия здесь вы- полняются внутри бесконечного цикла, то окно так и будет безостановоч- но бегать по экрану.
Определить браузер с помощью javascriptПопытка же свернуть его через 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 //после загрузки документа, будет выполнена проверка версии браузера //и предприняты какие то действия ...
. . .
function check_version () { < ! -- var str = navigator . appVersion ; var reg = /MSIE[\s]([\d])/i ; var matches = str . match (reg ) ; if (str . indexOf ("MSIE" ) > 0 && matches [ 1 ] < "7" ) { //к примеру, покажем блок с сообщением, вроде - "вы используете старую версию var obj = document . getElementById ("hintIE" ) ; obj . style . display = "block" ; //-->
< / head > //после загрузки документа, будет выполнена проверка версии браузера //и предприняты какие то действия < body onload = "check_version();" > . . . |
В PHP можно обратиться к заголовкам, передаваемым браузером, с помощью ф-ции getallheaders() , она вернет ассоциативный массив, где элемент будет содержать информацию о браузере.
Так мы выяснили, что путей как минимум — 2. Какой лучше? Я сторонник того, чтобы вся работа, которая не сопряжена с безопасностью, которая достаточно легко реализуема на стороне клиента — выполнялась на клиентской машине. В наше время чаще получается так, что ресурсы клиентских машин значительно превышают возможности виртуальных выделенных веб-серверов. Вот пусть они и работают по мере возможности:).
С другой стороны, у клиента вообще могут не работать javascripts и тогда выполнить проверку на сервере — единственный путь. Явление это очень редкое, хотя точной статистики у меня нет.
Есть тут и «подводные камни». Ведь если не принимать в счет мои личные предпочтения, то выполнить проверку на стороне сервера будет принципиально более верным подходом. Хотя бы потому, что определить версию браузера на некоторых старых клиентах, будет нельзя так, как я это показал в примере. И скрипт будет более сложным. Одним из подводных камней может оказаться система кеширования страниц сайта (как, например, у drupal). Один раз определив на стороне сервера, что клиент подходит или, наоборот, не подходит для отображения сайта, страница с данным результатом будет отображаться всем другим анонимным клиентам, пока не кончится время жизни кеша. В таких случаях уже javasctipt является единственным подходящим вариантом.
