Простейшие сценарии, состоящие из нескольких десятков строк, практически всегда можно подогнать таким образом, чтобы они корректно работали во всех браузерах. Но при разработке достаточно сложного сценария скоре всего придётся столкнуться с различиями в работе сценария в разных браузерах. Либо сценарий, отлично работающий в IE, совсем откажется это делать в Netscape. Тут-то и приходится выкручиваться, кто как умеет.
Вопрос: откуда берутся все эти трудности, если язык один и тот же? Всё дело в том, что в различных браузерах реализованы разные объектные модели. Однако, не всё так безнадёжно. Если посмотреть статистику, то мы обнаружим, что подавляющее большинство посетителей используют всего три типа браузеров. Это IE, Опера и браузеры на ядре "Gecko" (Netscape Navigator, Mozilla и пр.). Плюс к тому браузеры, построенные на базе майкрософтовского Эксплорера. И навряд ли в ближайшем будущем производители договорятся о соблюдении каких-либо стандартов. И придётся мучаться, подгоняя свои творения под всё многообразие браузеров.
Для начала неплохо было бы установить три основных браузера на свой комп, чтобы в них отлаживать и проверять сценарии.
Во-вторых, решить для себя, как будет реализовано разделение сценариев в соответствии с типом браузеров.
Здесь возможно несколько вариантов и у каждого свои плюсы и минусы.
Т.е. для каждого типа браузера - своя версия страницы или сценария. Плюсы в том, что страница в целом и сценарий в частности в 100% случаев будут корректно восприняты браузером и правильно отображены. Всё будет работать именно так, как вы задумали. Минусы этого метода тоже очевидны. Практически, вместо одного сайта, страницы или сценария придётся разрабатывать два, три или более. Сложно будет поддерживать такую махину, занимающую к тому же кучу места на сервере. Никто так и не делает, наверное.
Возможно использование страниц ветвления только в тех случаях, когда без этого не обойтись. Например, страница имеет вариант для различных браузеров с поддержкой Ява Скрипт, а так же для тех у которых Ява Скрипт не поддерживается или отключен. По одной и той же ссылке пользователь попадает на нужную страницу. Делается это довольно просто. Ссылка выглядит следующим образом.
<A HREF="noJavaScript.html" onClick="goto(); return false"> Переход </A>
Функция goto() будет выглядеть примерно так.
function goto(){
if (navigator.appName=="Netscape"){
location.href="netscapePage.html";
}
if (navigator.appName=="Microsoft Internet Explorer"){
location.href="iePage.html";
}
}
Что происходит, когда пользователь нажимает на ссылку? Если нет поддержки Ява Скрипт, то ссылка работает обычным образом, и пользователь перейдёт на страницу noJavaScript.html. В случае поддержки браузером Ява Скрипт, оператор return false отключает действие атрибута HREF и, в зависимости от типа браузера, происходит перенаправление на нужную страницу с помощью функции goto(). Таким образом можно создавать ветвления не только по браузерам, но и по их версиям. Вариантов сколько угодно. В теле функции goto() удобнее и функциональнее использовать оператор switch вместо if. Тогда можно установить несколько страниц для разных браузеров и одну страницу общую, если вдруг посетитель пользуется неизвестным браузером.
Это так называемые многоуровневые сценарии. Вот пример.
<HTML>
<HEAD>
<script language="JavaScript">
<!--
function fun1(){
// Операторы для JavaScript 1.0
}
-->
</script>
<script language="JavaScript1.1">
<!--
function fun1(){
// Операторы для JavaScript 1.1
}
-->
</script>
<script language="JavaScript1.2">
<!--
function fun1(){
// Операторы для JavaScript 1.2
}
-->
</script>
<script language="JavaScript1.3">
<!--
function fun1(){
// Операторы для JavaScript 1.3
}
-->
</script>
</HEAD>
<BODY>
<FORM>
<input type="button" value="button" onClick="fun1()">
</FORM>
</BODY>
</HTML>
Описывать функции надо последовательно, начиная с наименьшей версии языка. Такой подход более практичен, но учитывает только различия версий языка. Проблемы с различиями в объектной модели браузера останутся.
Он называется детектирование объектов. При использовании этого подхода мы не привязаны ни к конкретной версии языка, ни к версии браузера. Принцип очень прост. Если объект или свойство существует, то с ними можно творить всё что угодно. Этот метод позволяет писать сценарии, которые будут работать не только в современных версиях браузеров, но и в последующих, перспективных. Если в модели браузера нет такого объекта, то сценарий не выполнится. При этом не возникнет никаких сообщений об ошибках.
Разберём простой пример. Допустим, в HTML-коде есть элемент с идентификатором ID="elem1" и есть функция func1(), которая как-то использует этот элемент или его свойства. Как можно обратиться к элементу в сценарии, в зависимости от объектной модели браузера?
1. document.getElementById("elem1") браузеры стандарта W3C
2. document.all ["elem1"] - браузеры IE
3. document.layers ["elem1"] - браузеры NN4
Исходя из этого, пишем функцию, которая будет работать в любом типе браузера.
function func1(elemID){
if (document.getElementById){[операторы]}
if (document.all ){ [операторы]}
if (document.layers){ [операторы]}
}
Только не надо определять браузер используя такое детектирование объектов. Это не надёжно. Никогда не знаешь, какие свойства и объекты будут поддерживаться последующими поколениями браузеров. Можно и пролететь. Поэтому детектирование стоит проводить только для определения методов работы с объектом. В принципе, детектировать можно не только объекты, но также и их свойства и методы.
При использовании детектирования свойств надо быть особенно осторожным. Вот представьте, что вы собираетесь что-то сделать со свойством style какого-либо объекта. Только в каком-то браузере нет такого объекта. В этом случае вылезет сообщение об ошибке. Как этого избежать? Надо проверить сначала наличие самого объекта, а уж потом его свойства. Вот так:
if (
document.object
&&
document.object.style)
{[операторы]}
В данном примере, если нет такого объекта object, то первое условие ложно, а потому второе проверяться не будет.
При использовании проверки наличия свойств в условных операторах есть ещё одно "НО". Если свойство поддерживается объектом, но оно равно нулю или пустой строке, то оно будет интерпретироваться в условном операторе, как ложь. Можно избавить себя от подобных ошибок проверкой типа возвращаемых данных. Вот так:
if (
document.object
&&
typeof document.object.style!="undefined")
{[операторы]}
Вот в общем-то и всё, что я хотел рассказать. Если есть вопросы, то вы можете задать их мне в письменном виде.
Сергей К.
Neo-site