Функции различных Web-браузеров, например языковые настройки и поддержка JavaScript, могут быть причиной того, что Web-приложения работают по-разному в разных браузерах. Этот недостаток целостности у разных браузеров не только приводит к плохому внешнему виду приложения, но часто является причиной прекращения его работы. В этой статье представлено несколько советов, которые могут помочь вам решить некоторые из этих проблем.

Работа с различными видами браузеров

Главная причина, по которой Web-страницы не могут работать везде, это то, что различные виды браузеров поддерживают различные стандарты. Лучшим способом избежать этой проблемы является использование только общих атрибутов и методов. Тем не менее, иногда приходится писать специальный код.

Реализация атрибута innerText

Вы используете атрибут innerText для установки или выборки текста между начальным и конечным тегами объекта, что определено только в Microsoft® Windows® Internet Explorer®. Хотя этот атрибут широко используется, он не является стандартным. Вместо него вы могли бы использовать innerHTML но это не одно и то же. Атрибут innerText предлагает специальные возможности, например способность получать текст дочернего узла напрямую, что может помочь вам написать более "чистый" код. У вас также могут быть унаследованные страницы, использующие innerText. Реализуя атрибут innerText самостоятельно, вы позволяете этим страницам поддерживать больше браузеров. Например, вам может потребоваться реализовать этот атрибут в браузере на основе Mozilla; Листинг 1 показывает, как это сделать.

                
HTMLElement.prototype.__defineGetter__ 
(
   "innerText",function()
   //define a getter method to get the value of innerText, 
   //so you can read it now! 
   {
      var textRange = this.ownerDocument.createRange();
      //Using range to retrieve the content of the object
      textRange.selectNodeContents(this);
      //only get the content of the object node
      return textRange.toString();
      // give innerText the value of the node content
   }
);

Получение значения прокрутки и размера окна

Большинству Web-приложений требуются геометрические значения, например размер окна и значения прокрутки. Однако браузеры могут хранить эти значения в различных атрибутах; некоторые атрибуты даже имеют одно и то же название, но назначение их различно. Вам лучше создавать собственные уникальные переменные для замещения значений атрибутов. Листинг 2 показывает, как создать уникальные атрибуты в большинстве популярных браузеров.

                
var scrollLeft,scrollTop;
// scrollLeft: The distance between the horizontal scrollbar 
// with the left edge of the frame.
// scrollTop:  The distance between the vertical scrollbar
// with the top edge of the frame. 

// Get the scroll value from different browsers.
// Determine the browser type first. 
// And then get the value from the particular property.		
if (window.pageYOffset){  
	scrollTop = window.pageYOffset 
} else if(document.documentElement && 
document.documentElement.scrollTop){ 
	scrollTop = document.documentElement.scrollTop; 
} else if(document.body){ 
	scrollTop = document.body.scrollTop; 
} 

if(window.pageXOffset){ 
	scrollLeft=window.pageXOffset 
} else if(document.documentElement &&
 document.documentElement.scrollLeft){ 
	scrollLeft=document.documentElement.scrollLeft; 
} else if(document.body){ 
	scrollLeft=document.body.scrollLeft; 
}


var windowWidth,windowHeight; // frame width & height

if(window.innerWidth){ 
	windowWidth=window.innerWidth; 
} else if(document.documentElement && 
document.documentElement.clientWidth){ 
	windowWidth=document.documentElement.clientWidth; 
} else if(document.body){ 
	windowWidth=document.body.offsetWidth; 
} 

if(window.innerHeight){ 
	windowHeight=window.innerHeight; 
} else if(document.documentElement && 
document.documentElement.clientHeight){ 
	windowHeight=document.documentElement.clientHeight; 
} else if(document.body){ 
	windowHeight=document.body.clientHeight; 
}

Начало координат окна в языках с обратным направлением письма

Некоторые языки, например арабский и иврит, известны как языки с обратным направлением письма, то есть в них читают справа налево. Современные браузеры поддерживают возможность отображать подобное содержимое. Однако когда страница отображается справа налево, Internet Explorer определяет другое начало координат окна. Начало координат находится не в левом углу области отображения, а в левом углу видимой части. Это означает, что некая часть страницы будет иметь отрицательное значение x, из-за чего некоторые элементы вашей страницы окажутся в неправильном положении. На Рисунке 1 показано, где находится начало координат в Internet Explorer, когда страница показывается слева направо.

Помните, что при отображении страницы в Internet Explorer справа налево вы должны внести изменения в арифметические операции, например отрегулировав положение элемента сдвигом начала координат.

Получение многострочного древовидного списка

Вы используете теги <ul> and <li> для отображения древовидного списка. Однако браузеры на основе Mozilla не позволяют вам встраивать другие элементы в теги <li>, поэтому вы можете получить только простые списки. Для решения этой проблемы вы можете использовать таблицы, чтобы создать древовидный список. Используя TABLE вместо LI для реализации элемента списка, вы можете создавать сложные элементы.

Однако вы снова столкнётесь с проблемами, если в TABLE много колонок. Изменение размеров окна с помощью мыши приводит к тому, что страница выглядит как на Рисунке 2.

Рисунок 3 показывает, как выглядит страница, когда вы изменяете размер фрейма; колонки больше не привязываются к сетке.

Вы можете указать ширину TD в таблице древовидного списка, но это плохое решение, так как ширина TD означает лишь максимальный размер, поэтому браузеры могут изменить размер TD для отображения дополнительного содержимого при изменении размеров окна. Чтобы достичь "организованного" внешнего вида, вам нужно что-то ещё - DIV. (В этой статье DIV, TABLE и TD представляют узлы дерева DOM; конечно же, вы также можете относиться к ним, как к HTML-тегам.)

К сожалению, вы скоро поймёте, что DIV вызывает подобные проблемы. Ширина DIV является не абсолютной величиной, а, скорее, минимальной шириной. Если вы измените размер окна, некоторые браузеры также изменят ширину DIV. А нельзя ли скомбинировать TD и DIV? Если использовать DIV внутри TD, то будут определены и максимальный, и минимальный размеры ячеек. Теперь у нас фиксированный размер, как показано на Рисунке 4.

В начало

Работа с несколькими языками

Если ваше приложения поддерживают несколько языков, имейте в виду, что один и тот же текст на различных языках, возможно, будет иметь разную длину, что может привести к плохому внешнему виду страницы. В этой ситуации может помочь настройка DIV, содержащего текст.

Определение правильного размера DIV

Предположим, что вы хотите использовать DIV, чтобы нарисовать всплывающее меню. Однако если вы не зададите вашему меню фиксированный размер, вы столкнётесь с проблемой при скроллинге страницы, как показано на Рисунке 5.

Как вы видите, текст выходит за границы. Internet Explorer автоматически задаёт DIV размер видимой части, когда DIV не имеет фиксированного размера. Поэтому, когда вы прокручиваете страницы, чтобы просмотреть невидимую её часть, размер DIV недостаточен, что приводит к сдвигу текста. Для решения этой проблемы задайте фиксированный размер DIV.

Теперь нужно определить, как управлять размером. Вы не можете жёстко задать размер, поскольку длина текста в DIV не может быть фиксированной, если вы поддерживаете много языков. Вам нужно получать длину текста динамически, а затем устанавливать размер DIV. В этот раз вам может помочь таблица. Размер таблицы не зависит от её видимости. Листинг 3 показывает, как задать надлежащую ширину DIV.

                
var leftmenu = document.getElementById("leftmenu");
var divWidth = parseInt(document.getElementById("divtable").offsetWidth);
leftmenu.style.width = divWidth  +"px";

В начало

Работа с различными настройками браузера

Источником проблем могут быть не только различные браузеры и языки, но иногда и пользователи. Пользователи могут создавать проблемы, когда они задают специальные настройки в своих браузерах. Например отключение функциональности JavaScript может вызвать серьёзные трудности для вашего приложения.

Поддержка браузеров, в которых не поддерживается JavaScript

Некоторые пользователи по-прежнему используют старые версии браузеров, а некоторые отключают JavaScript, что приводит к некорректному отображению Web-страниц. Чтобы решить эту проблему, вы можете использовать тег <noscript>. Просто добавьте к тегу текст, сообщающий пользователям, что их браузеры не поддерживают JavaScript и не могут правильно отобразить страницу. В Листинге 4 показан код, который вы можете использовать с этой целью.

                
<html>
	<head>
	<noscript>
		Your browser does not support JavaScript, 
		or you've disabled the JavaScript in your browser, 
		so you cannot view this page correctly.
	</noscript>
	</head>
</html>

Тем не менее, лучшим решением данной проблемы является создание другой версии вашего Web-приложения, которая не зависит от JavaScript. Включили пользователи поддержку JavaScript или нет, они всё равно могут работать с приложением. Используйте код, показанный в Листинге 5, чтобы направить пользователей на версию без поддержки JavaScript.

                
<noscript>
	<meta HTTP-EQUIV="REFRESH" CONTENT="0;URL=noscriptversion.jsp?">
</noscript>

В начало

Резюме

В этой статье я предложил несколько советов, а именно: как реализовать атрибут innerText в браузерах на основе Mozilla, как использовать переменные для представления значений геометрии, чтобы они были доступны для всех браузеров, и как настроить положение элемента при помощи сдвига точки начала координат, когда страница отображается в Internet Explorer справа налево. Я также показал, как получить многострочный древовидный список, как указать правильный размер элементов DIV и как осуществлять поддержку браузеров, не поддерживающих JavaScript. Надеюсь, что эти советы могут помочь вам в вашей каждодневной работе.

Ресурсы

Научиться

• Оригинал статьи: Adapt Web applications to work with multiple browsers.
  
  
• Капризный пользователь: Ограничение зависимости от JavaScript (Питер Зеебах, developerWorks, март 2001 г.): Узнайте, почему JavaScript может не работать в данном браузере, и почему ваши страницы никогда не должны на него полагаться.
  
  
• JavaScript и Объектная модель документов (Николас Чейз, developerWorks, июль 2002 г.): Вникните в JavaScript-подход к DOM.
  
  
• Межбраузерная таблица DHTML (Шелли Саксена, developerWorks, май 2001 г.): Научитесь создавать межбраузерную таблицу при помощи DHTML и JavaScript.
  
  
• Стандарты World Wide Web Consortium (W3C): Белые страницы стандартов W3C - лучший способ поддержки различных браузеров.
  
  
• Mozilla: Посетите официальный Web-сайт этого браузера.
  
  
• Книжный магазин по технологиям: Ищите книги по этой и другим техническим темам.
  
  
• Раздел Web-разработки developerWorks: Улучшите ваши навыки разработки сайтов при помощи статей и руководств по Web-технологиям.
  
  
• Технические события и web-трансляции developerWorks: Будьте в курсе технических сессий, которые ускоряют процесс обучения и улучшают качество и результаты самых сложных программных проектов.
  
  

Получить продукты и технологии

• Пробное ПО IBM: Создайте ваш следующий проект разработки с помощью ПО, которое можно загрузить прямо с developerWorks.
  
  
• Раздел загрузки продуктов по Web-разработке developerWorks: Найдите больше бесплатного ПО для загрузки.
  
  

Обсудить

• Примите участие в обсуждении материала на форуме.
  
  
• Блоги developerWorks: Ознакомьтесь с блогами и примите участие в работе сообщества developerWorks!
  
  

Об авторе

Оценить эту статью

Комментарии

В начало

Содержание

• Работа с различными видами браузеров
• Работа с несколькими языками
• Работа с различными настройками браузера
• Резюме
• Ресурсы
• Об авторе
• Комментарии