Работа с поведениями Microsoft Internet Explorer

Поведения Microsoft Internet Explorer, которые начали поддерживаться в версии 5.5 этой программы,— очень мощный инструмент создания динамических Web-страниц. К сожалению, он плохо описан в популярных книгах по Web-дизайну и Web-программированию, поэтому используется нечасто.

Народ замечает

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

Народ предупреждает!

Напоминаем еще раз, что поведения поддерживаются ТОЛЬКО Internet Explorer версии 5.5 или более поздними.

Что такое поведения Microsoft Internet Explorer и как их создавать?

Проблема

Вот все говорят: "Поведения Internet Explorer... Поведения Internet Explorer..." А что они собой представляют и как их создавать? Наверно, очень сложно...

Решение

Поведения Microsoft Internet Explorer — это аналог каскадных таблиц стилей CSS, но не для правил оформления страниц, а для Web-сценариев. Если совсем просто, то поведение — это текстовый файл с расширением htc и содержащий код сценариев — обработчиков событий, которые могут быть привязаны к любому элементу страницы так же, как обычные стили CSS.

Создать поведение так же просто, как таблицу стилей. Сначала мы привязываем к нужному нам элементу страницы стилевой класс. Делается это хорошо нам знакомым атрибутом class:

<<Тег> CLASS= "<Имя стилевого класса>" [«Остальные атрибуты тега>]>

Следующий шаг— определение этого стилевого класса в таблице стилей, внешней или внутренней. Это тоже нам прекрасно знакомо.

Итак, стилевой класс создан, атрибуты стиля и их значения написаны. Теперь нам нужно указать, что мы также собираемся привязать к этому стилю еще и поведение. (Сам файл поведения мы пока не создали, но создадим потом.) Делается это с помощью вот такого атрибута стиля:

behavior:url(<Имя файла поведения>);

Как видим, атрибут этот имеет "говорящее" имя — behavior ("поведение"). Также заметим, что имя файла поведения указывается без кавычек.

Народ замечает

В принципе, городить огород с таблицей стилей совсем не обязательно. Атрибут стиля behavior можно поместить и во встроенный стиль, привязанный к тегу с помощью атрибута style этого тега:

<<Тег> STYLE= "behavior:url (<Имя файла поведения>) ;[Остальные атрибуты стиля]" [<Остальные атрибуты тега>]>

Третий, и последний, шаг — создать сам файл поведения. Как мы уже выяснили, он должен быть текстовым и иметь расширение htc. Формат его содержимого должен быть таким:

<PUBLIC:COMPONENTS>

<Определение обработчиков событий>

<SCRIPT TYPE="text/javascript"> <Код обработчиков событий>

</SCRIPT> </PUBLIC:COMPONENTS

Весь код, описывающий поведение, должен помещаться внутри парного тега <public:component>. Код JavaScript обработчиков событий также должен быть заключен в парный тег <script>.

Что касается определений обработчиков событий, то они должны иметь такой формат:

<PUBLIC:ATTACH ЕVЕNТ="<Имя события>" [FOR="<Элемент страницы>"]ONEVENT="<Вызов функции-обработчика события>"/>

Значение обязательного атрибута event одинарного тега <PUBLIC:аттасн> должно содержать имя события в виде строки, набранной маленькими буквами. Значение другого обязательного атрибута— onevent— должно содержать вызов функции-обработчика этого события, объявленной ниже, в теге <script>. Здесь все понятно.

Что касается необязательного атрибута for, to он задает элемент страницы или объект Web-обозревателя, событие которого должно обрабатываться. Всего он может принимать три значения:

   "element" — элемент страницы, к которому было привязано поведение. Это значение по умолчанию, применяемое, если атрибут for не указан;

   "document"—тело Web-страницы;

"window" — окно Web-обозревателя.

И еще один важный момент. Мы привыкли, что в языке HTML одинарные теги не содержат закрывающей пары. Но поведения — другое дело, и даже одинарный тег (например, <public:attach>) должен содержать закрывающий символ / перед символом >. Вот так:

<PUBLIC:ATTACH <АтрибутЫ> />

Впрочем, пробел перед этим символом необязателен.

Пример

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

Итак, вот содержимое файла jspsIEBehaviorSimple.html с самой Web-страницей:

<HTML> <HEAD>

<STYLE TYPE="text/CSS">

.nodefault behavior:url(jspsIEBehaviorSimple.htc); } </STYLE> </HEAD> <BODY>

<P><A HREF="pagel.html" CLASS="nodefault">Страница 1</A></P> <P><A HREF="page2.html" CLASS="nodefault">Страница 2</A></P> <P><A HREF="page3 .html">Страница 3</Ах></Р> </BODY> </HTML>

А вот содержимое файла jspsIEBehaviorSimple.htc с кодом поведения:

<PUBLIC:COMPONENTS

<PUBLIC:ATTACH EVENT="onclick" ONEVENT="elementOnClick();"/> <SCRIPT TYPE="text/javascript"> function elementOnClick() {

event.returnValue = false; } </SCRIPT> </PUBLIC:COMPONENT>

Если открыть файл jspsIEBehaviorSimple.html в Web-обозревателе, то при щелчках по гиперссылкам, ведущим на страницы 1 и 2, ничего происходить не будет (т. е. наше поведение работает). А гиперссылка, указывающая на страницу 3, работать будет, поскольку мы не указали в ее теге стилевой класс nodefault, к которому привязано поведение.

Как из поведения получить доступ

к элементу страницы, к которому оно привязано,

и телу страницы?

Проблема

Поведения, конечно, хорошая штука... Но мне нужно из него получить доступ к элементу страницы, к которому оно привязано, и к телу самой страницы. Это возможно?

Решение

Разумеется! Для этой цели Internet Explorer предоставляет программисту два объекта:

element — элемент страницы, к которому привязано поведение;

document — тело самой этой страницы.

Эти объекты доступны из любого сценария, являющегося частью кода поведения.

Пример

Давайте немного исправим содержимое файла jspsIEBehaviorSimple.htc, приведенное ранее (добавленный код выделен полужирным шрифтом):

<PUBLIC:COMPONENT>

<PUBLIC:ATTACH EVENT="onclick" ONEVENT="elementOnClick();"/> <SCRIPT TYPE="text/javascript"> function elementOnClick() { window.alert(element.innerText + "недоступна"); event.returnValue = false; } </SCRIPT> </PUBLIC:COMPONENT>

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

Народ замечает

Вот, кстати, одно из преимуществ поведений Internet Explorer. Чтобы исправить какой-либо из обработчиков событий, нам достаточно внести правки в один-единственный файл — файл поведения.

Как из поведения отследить момент окончания загрузки элемента страницы, к которому привязано поведение, и тела страницы?

Проблема

Хорошо, вы меня убедили! Я таки написал свое поведение, но столкнулся с проблемой. Мне нужно отследить момент, когда Web-обозреватель заканчивает загрузку элемента страницы, к которому привязано поведение, и тела самой страницы. Как это можно сделать?

Решение

Что ж, разработчики из Microsoft и это продумали. Internet Explorer предоставляет аж два события, доступных из кода поведения и сообщающих об окончании загрузки: элемента страницы, к которому привязано поведение, — oncontentReady; тела страницы — onDocumentReady.

Обработать эти события проще простого. В начале кода поведения помещаем уже знакомый нам одинарный тег <ривыс: аттасн> такого вида:

<PUBLIC:ATTACH EVENT="oncontentready|ondocumentready" [FOR="<Элемент страницы>"]0NEVENT="<Bbf3OB функции-обработчика события>"/>

И пишем объявление самой функции-обработчика.

Народ замечает

Вообще, поведение может обрабатывать еще два события, о которых автор не счел нужным упомянуть. Это событие onContentSave, наступающее при сохранении Web-страницы на жестком диске и копировании ее в буфер обмена, и событие onDetach, наступающее, когда поведение отключается от элемента страницы (это происходит при выгрузке страницы). Иногда они бывают полезными.

Пример

Давайте сделаем так, чтобы гиперссылки, к которым было привязано наше поведение, сразу же после загрузки зачеркивались. Для этого перепишем файл поведения jspsIEBehaviorSimple.htc так:

<PUBLIC:COMPONENT>

<PUBLIC:ATTACH EVENT="onclick" ONEVENT="elementOnClick();"/> <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="elementOnReady () ,-"/> <SCRIPT TYPE="text/j avascript"> function elementOnClickO {

event.returnValue = false; }

function elementOnReady() {

element.style.textDecoration = "line-through"; } </SCRIPT> </PUBLIC:COMPONENT>

Свойство style экземпляра объекта, соответствующего элементу страницы, предоставляет доступ к одноименному объекту — стилю CSS. Свойство textDecoration, как и атрибут стиля text-decoration, позволяет задать оформление текста (подчеркивание, надчеркивание или зачеркивание). Значение "line-through" этого атрибута как раз зачеркивает текст.