Microsoft Internet Explorer 5.0 для разработчиков
В сентябрьском номере «КомпьютерПресс» мы познакомились с некоторыми новинками для разработчиков, появившимися в версии Internet Explorer 5.0 Developer Preview (см. «Microsoft Internet Explorer 5.0: новинки для разработчиков», КомпьютерПресс № 9'98). В середине марта этого года стала доступной финальная версия этого браузера, и мы решили вернуться к теме «Microsoft Internet Explorer 5.0 для разработчиков». В этом обзоре мы рассмотрим основные изменения, появившиеся в 5-й версии браузера фирмы Microsoft, и приведем некоторые примеры использования ряда новинок, к которым относятся:
Примечание. Этот обзор следует рассматривать как продолжение материала, опубликованного в КомпьютерПресс № 9'98. Желающие могут загрузить статью в PDF-формате с FTP-сервера: ftp://www.compress.ru
Улучшенная поддержка стилей
Как известно, существуют еще две категории: HTML-элементы помимо таблиц подразделяются на блочные и «строчные» элементы. Блочные элементы отображаются с использованием дополнительной строки перед и после самого элемента, например элемента <P>. Строчные элементы отображаются в пределах строки, в которой они используются, например <B>. В спецификации Cascading Style Sheets 1.0 (CSS 1.0) было введено свойство display, позволяющее задать способ отображения параграфов и других элементов страницы.
Базовая поддержка свойства display была реализована в Internet Explorer 4.0 и позволяла использовать данное свойство для удаления элемента из потока элементов документа. За счет переключения значений этого свойства создавались и создаются различные типы выпадающих меню, а также вложенных текстовых сообщений:
<html>
<head><title>IE5 Demos</title>
<script>
function show()
{
if (hidden.style.display == "none")
{
hidden.style.display = ""
}
else
{
hidden.style.display = "none"
}
}
</script>
</head>
<body>
<p onClick="show()">
Нормальный параграф. Щелкните здесь, чтобы увидеть
скрытый параграф. Щелкните еще раз, и параграф станет
снова невидимым
</p>
<p style="display : none" id="hidden">
Скрытый параграф.
</p>
</body>
</html>
Тем не менее свойство display в Internet Explorer 4.0 могло иметь либо значение по умолчанию, либо значение none. Таким образом, в Internet Explorer 4.0 параграф всегда либо отображался как блочный элемент, либо не отображался вообще.
В Internet Explorer 5.0 была введена поддержка блочных (block) и строчных (inline) значений для свойства display. Эти значения можно использовать, например, для изменения ориентации элементов — горизонтальной или вертикальной. Так, можно создать меню, которое будет отображаться либо горизонтально, либо вертикально, в зависимости от значений свойства display соответствующих элементов.
В дополнение к
<html>
<head><title>IE5 Demos</title>
<style>
.inline A {display: inline}
.block A {display: block}
</style>
<script>
function menu(c)
{
if (c)
{
document.all.menu.className = 'block'
}
else
{
document.all.menu.className = 'inline'
}
}
</script>
</head>
<body>
<div class = inline id=menu>
<a href="#">Элемент 1</a>
<a href="#">Элемент 2</a>
<a href="#">Элемент 3</a>
<a href="#">Элемент 4</a>
</div>
<p>
<div>
<button onClick="menu(true)"><b>B</b>lock</button>
<button onClick="menu(false)"><b>I</b>nline</button>
</div>
</body>
</html>
улучшенной поддержке свойства display в Internet Explorer 5.0 изменилась к лучшему поддержка управления позиционированием. Напомним, что в Internet Explorer 5.0 позиционирование распространялось только на ряд элементов — DIV, SPAN, INPUT и т.п. Помимо этого требовалось указывать ширину элемента.
В Internet Explorer 5.0 эти ограничения сняты. Теперь можно управлять позиционированием практически любого элемента страницы. Например, можно задать абсолютное расположение элемента P, установив значение атрибута position в absolute и задав координаты его верхней части:
<P style="position : absolute; top : 150px">
Также можно ограничить ширину любого элемента, включая «строчные» элементы типа B и EM, простым использованием атрибута width:
<P style="width : 100pt;">
В Internet Explorer 5.0 также появилась возможность динамического управления позиционированием. Например, поддерживается динамическое изменение не только значений атрибутов top, left, width и height, но и значения атрибута position, который определяет, каким образом отображается тот или иной элемент — статически (flow), относительно (relative) или позиционно (absolute).
Эти изменения обеспечивают не только большую поддержку таблиц стилей, но и управление нестандартными элементами, создаваемыми на базе XML. Такие элементы полностью описываются через таблицы стилей, и только при полном контроле их скриптовых программ можно говорить об динамизме.
 |
|
Управление кэш-памятью
В Internet Explorer 5.0 реализована поддержка кэш-памяти посредством двух дополнений к заголовку HTTP-запроса, возвращаемого сервером. Эти дополнения называются pre-check и post-check. За счет поддержки этих дополнений можно снизить сетевой трафик — клиент будет обращаться к серверу только за ресурсами, которые обновляются часто, и извлекать остальные из своей кэш-памяти. Опция post-check задает интервал в секундах, после которого необходимо проверять обновление элемента. Опция pre-check задает интервал в секундах, после которого необходимо проверять обновление элемента перед его отображением.
Эти опции указываются в HTTP заголовке следующим образом:
Cache-Control: post-check=900,pre-check=3600
Это можно сделать, например, используя Active Server Pages (ASP):
<%@ language="jscript"%>
<%
Response.AddHeader("Cache-Control", post-check=900,
pre-check=3600");
%>
|
|
Разумные формы
Каждый пользователь, который когда-либо сталкивался с формами, помнит, сколько
времени занимает ввод одной и той же информации — фамилии, адреса, телефона,
адреса электронной почты и т.п. 
Теперь все эти проблемы в прошлом — однажды введенные данные запоминаются,
и, чтобы заполнить форму, нужно только выбрать то или иное значение из списка.
Технология, позволяющая Internet Explorer сохранять информацию, введенную в полях формы типа <INPUT TYPE="TEXT"> и <INPUT TYPE="PASSWORD">, называется Intelliforms. Идея ее заключается в следующем. Internet Explorer сохраняет введенную информацию и когда пользователь начинает вводить данные в поля формы, предлагает сделать выбор из списка уже имеющихся данных, используя механизм AutoComplete.
Чтобы включить этот механизм, достаточно установить опцию AutoComplete в панели настройки Internet Explorer. Эта панель вызывается командой Tools | Internet Options и доступна на вкладке Content.
В панели AutoComplete есть следующие опции:
| Web Address | Ранее введенный URL запоминается и подставляется при вводе начальных символов |
| Forms | Запоминается информация, вводимая в полях формы |
| User names and passwords on forms | Запоминается информация, вводимая при запросе имени пользователя и пароля |
Отметим следующие характеристики технологии Intelliforms.
-
Вся информация хранится на пользовательском компьютере в закодированном виде и недоступна извне.
-
Разработчикам не требуется вносить никаких изменений в код самих форм — пользователи должны только установить соответствующие опции.
-
Браузер анализирует поля с наиболее часто встречающимися названиями и заносит информацию из них в свое хранилище.
Помимо Intelliforms в Internet Explorer 5 введена возможность автоматического заполнения полей формы.
В Internet Explorer 5.0 введен новый атрибут для элементов <INPUT TYPE="TEXT"> и <INPUT TYPE="PASSWORD"> формы. Этот атрибут называется VCARD_NAME и позволяет связывать поля формы с соответствующими данными, введенными в диалоговой панели Internet Options | Content | Personal Information.
Как известно, в режиме My Profile мы можем указать различную информацию о себе
— имя, почтовый адрес, адрес электронной почты, телефон и т.п., называемую профилем
пользователя. Новый атрибут, используемый совместно с полями ввода, позволяет
автоматически вводить информацию из профиля пользователя — достаточно щелкнуть
мышью в поле и выбрать текст.
Естественно, что для этого каждый элемент формы должен содержать атрибут VCARD_NAME, который будет извлекать соответствующую информацию:
<input type="text" name="name" size=40 vcard_name = "vCard.DisplayName">
В качестве значений атрибута VCARD_NAME возможно использование следующих полей профиля пользователя:
vCard.Cellular vCard.Company vCard.Department vCard.DisplayName vCard.Email vCard.FirstName vCard.Gender vCard.Home.City vCard.Home.Country vCard.Home.Fax vCard.Phone vCard.Home.State vCard.Home.StreetAddress vCard.Home.Zipcode vCard.Homepage vCard.JobTitle vCard.LastName vCard.MiddleName vCard.Notes vCard.Office vCard.Pager vCard.Business.City vCard.Business.Country vCard.Business.Fax vCard.Business.Phone vCard.Business.State vCard.Business.StreetAddress vCard.Business.URL vCard.Business.Zipcode
Поддержка технологии Intelliforms может быть включена или выключена c помощью атрибута AUTOCOMPLETE, который может быть указан как для отдельного поля, так и для всей формы. Например, если вы не хотите, чтобы пароль вводился автоматически, отмените эту возможность для соответствующего поля:
<input type="password" name="pwd" autocomplete="off">
Также можно отменить этот режим и для всей формы:
<FORM autocomplete="off"> ... </FORM>
Отметим, что совместное использование функций AutoComplete и автоматической вставки информации из профиля существенно сокращает время заполнения формы и делает работу пользователя более эффективной.
Новый атрибут поддерживается только в Internet Explorer 5.0 и игнорируется другими браузерами.
|
|
Управление мышью
В Internet Explorer 5.0 появилось несколько дополнений, позволяющих легко управлять мышью. Среди них — методы setCapture и releaseCapture, а также событие onLoseCapture. С помощью этих методов и события вы можете задать внутри HTML-документа единый обработчик всех действий с мышью.
|
|
Скроллинг
Новый метод doScroll позволяет управлять прокруткой содержимого любого элемента. Этот метод имеет один параметр, который указывает, как выполняется прокрутка:
| Значение | Описание |
|---|---|
| scrollbarDown | Значение по умолчанию. Прокрутка вниз. Синоним – down |
| scrollbarHThumb | Горизонтальная прокрутка с использованием полосы прокрутки |
| scrollbarLeft | Прокрутка влево. Синоним – left |
| scrollbarPageDown | Прокрутка на страницу вниз. Синоним — pageDown |
| scrollbarPageLeft | Прокрутка на страницу влево. Синоним — pageLeft |
| scrollbarPageRight | Прокрутка на страницу вправо. Синоним — pageRight |
| scrollbarPageUp | Прокрутка на страницу вверх. Синоним — pageUp |
| scrollbarRight | Прокрутка вправо. Синоним — right |
| scrollbarUp | Прокрутка вверх. Синоним — up |
| scrollbarVThumb | Вертикальная прокрутка с использованием полосы прокрутки |
Рассмотрим следующий пример. Пусть у нас имеется элемент DIV, размеры которого заданы таким образом, что его содержимое заведомо превышает их.
Для реализации программной прокрутки мы включаем в состав страницы 4 кнопки: up, down, left и right. Далее мы пишем следующий обработчик нажатия, единый для всех кнопок:
<script>
function doClick(btn)
{
switch (btn)
{
case "0" :
ScrDiv.doScroll("pageUp");
case "1" :
ScrDiv.doScroll("pageDown");
case "2" :
ScrDiv.doScroll("pageLeft");
case "3" :
ScrDiv.doScroll("pageRight");
}
}
</script>
А в элементах <INPUT>, описывающих кнопки, добавляем нестандартный атрибут CODE и вызов обработчика нажатия:
<input type="button" value="up"
code = "0"
onClick = "doClick(this.code)">
<input type="button" value="down"
code = "1"
onClick = "doClick(this.code)">
<input type="button" value="left"
code = "2"
onClick = "doClick(this.code)">
<input type="button" value="right"
code = "3"
onClick = "doClick(this.code)">
Наш элемент DIV имеет идентификатор ScrDiv, поэтому вызовы метода doScroll распространяются именно на него:
ScrDiv.doScroll("pageUp");
Таким образом, нажатие кнопок up, down, left и right будет приводить к программной прокрутке содержимого элемента DIV.
Отметим, что метод doScroll может быть вызван и для всего документа:
document.body.doScroll("PageDown");
Для того чтобы включить у того или иного элемента полосы прокрутки, следует применить к этому элементу стиль overflow:scroll. Например:
<div ID=ScrDiv STYLE="width:100px;height:75px;
overflow:scroll>
|
|
Вывод на принтер
Для поддержки вывода содержимого HTML-документа на принтер в Internet Explorer 5.0 реализован метод window.print, а также два новых события — onBeforePrint и onAfterPrint. Метод print вызывает панель настройки принтера и является аналогом вызова команды меню File | Print. Вот пример вызова этого метода:
<html>
<head><title>IE5 для разработчиков</title>
<script>
function doClick()
{
window.print();
}
</script>
</head>
<body bgcolor="wheat">
<button onClick="doClick();">Print!</button>
</body>
</html>
Событие onBeforePrint возникает перед вызовом диалоговой панели Print Событие onAfterPrint после того, как весь документ отправлен на устройство печати.
В следующем примере показано, как задать обработчики этих двух событий:
<script>
var oldTitle;
function beforePrint()
{
oldTitle = document.title;
document.title = "[Печатная копия]"
}
function afterPrint()
{
document.title = oldTitle;
}
</script>
...
<body onbeforeprint="beforePrint()"
onafterprint="afterAprint()">
...
</body>
|
|
Добавление в Favorites
Internet Explorer 5.0 поддерживает программное добавление в список закладок (Favorites). Вы можете даже расположить рядом со ссылкой свой логотип. Для этого в корневом каталоге вашего узла (например, www.site.ru) надо разместить файл с именем favicon.ico (например, www.site.ru\favicon.ico). Обнаружив такой файл, Internet Explorer 5.0 разместит значок в списке закладок рядом с адресом страницы. Если вы не можете разместить значок в корневом каталоге сервера, можно указать ее местоположение с помощью элемента link:
<link rel="SHORTCUT ICON" href="/graph/siteicon.ico">
Чтобы пользователям было еще удобнее, можно разместить на странице кнопку или ссылку для добавления в список закладок. Например:
<script>
// Если браузер - IE 5.0
document.write("<u> <span style="cursor:hand;" onclick='
window.external.AddFavorite(location.href, document.title);'>
Добавить в список закладок</span></u>");
</script>
|
|
Image Tool
Одним из удобных дополнений к Internet Explorer 5.0 стала утилита Image Tool, которая входит в состав Web Accessories (см. на нашем CD-ROM). С ее помощью можно получить список всех графических изображений для данной страницы, узнать их размер (в пикселах и байтах), а также время загрузки этой страницы для различных скоростей связи — 14,4 Кбит/с, 28,8 Кбит/с и 56 Кбит/с. Например, для следующей Web-страницы
Мы получим такую информацию:
Каждое графическое изображение в списке можно просмотреть в отдельном окне
и при необходимости скопировать. Отметим, что в списке показаны только уникальные
изображения. Например, если то или иное изображение используется более одного
раза, оно отображается один раз и в соответствующей колонке списка указывает,
сколько раз использовано данное изображение.
|
|
Фильтр redirect
Проблема использования различных мультимедийных расширений в Internet Explorer заслуживает отдельной статьи. Здесь же мы лишь отметим одну новинку, появившуюся в версии 5.0, — фильтр redirect.
Данный фильтр преобразует объект в объект типа DAImage, который может управляться через интерфейс Microsoft DirectAnimation. Фильтр redirect задается, как и любой другой фильтр, — через свойство style:
<div style="filter:redirect"> ... </div>
|
|
Комментарии
В Internet Explorer 5.0 расширен синтаксис комментариев. Данный синтаксис игнорируется другими браузерами и позволяет использовать уникальные возможности 5-й версии браузера и при необходимости задавать код для других версий и платформ. Например:
<!--[if IE5]>
Здесь располагается код и элементы, использующие
возможности Internet
Explorer 5.0
<! [endif] -->
<!--[if ! IE5]>
Здесь располагается "обычный" код и элементы
<! [endif] -->
В данном обзоре, дополняющем обзор, опубликованный в КомпьютерПресс №'9-98, мы рассмотрели ряд новинок, появившихся в Internet Explorer 5.0. Естественно, что на этом наше знакомство с данным продуктом не заканчивается — в ближайших номерах мы рассмотрим некоторые темы, связанные с программированием для этого браузера.
Также в этом номере публикуются статьи, посвященные поддержке Document Object Model в Internet Explorer 5.0 — «Internet Explorer 5.0 и Document Object Model» и новинкам в скриптовых языках — «Internet Explorer 5.0 — Новые версии скриптовых языков»
КомпьютерПресс 5'1999
