Онлайн учебники на TEPKA.ru

Учебник по HTML 4

Примеры более сложного взаимодействия между фреймами

Выше были рассмотрены достаточно простые типовые примеры взаимодействия между фреймами. Были рассмотрены задачи создания новых окон, замены содержимого отдельных фреймов, а также выдачи документа в полное окно с разрушением всей структуры фреймов. Даны примеры использования задаваемых имен фреймов, а также зарезервированных имен "_blank", "_self" и "_top". Использование последнего зарезервированного имени "_parent" более сложно и будет описано ниже.

В данном разделе будут рассмотрены более сложные варианты взаимодействия между фреймами. В частности, будет реализована замена содержимого нескольких смежных фреймов.

Одним из наиболее часто встречающихся вариантов применения фреймов, который уже упоминался в данной главе, является случай двух фреймов, один из которых содержит список ссылок, а в другой загружаются сами документы (рис. 5.1).

Попробуем расширить постановку задачи. Пусть необходимо отображать на экране содержимое достаточно большого документа, состоящего из глав, разделенных на разделы. Типичным примером служит техническая литература по какой-либо тематике. Опишем желаемое представление такого документа на экране. Разобьем экран на три фрейма, в одном из которых будет располагаться список глав книги, во втором — перечень разделов выбранной главы, а в третьем — текст выбранного раздела. При выборе ссылки во втором фрейме должно меняться содержимое третьего фрейма. Реализация этого требования тривиальна. При выборе ссылки в первом фрейме должно одновременно изменяться содержимое как второго, так и третьего фрейма. На первый взгляд реализация этой задачи на языке HTML невозможна (без применения программирования на языке JavaScript или др.), так как при выполнении ссылки загружается только один документ, а не два или более. Тем не менее, решение данной задачи вполне возможно.

Покажем возможную схему решения такой задачи на простом примере. Пусть требуется отобразить на экране три фрейма и загрузить в них некоторые документы. Поставим задачу создать в каждом из этих фреймов ссылки, реализация которых, например, меняла местами содержимое двух фреймов. Пусть первый фрейм занимает 50% ширины окна и 100% высоты и располагается с левой стороны окна. Правая половина окна делится по горизонтали также пополам и содержит два других фрейма. Такая структура описывается следующим кодом:

<HTML>

<HEAD>

<TITLE>Пример взаимодействия между фреймами</TITLE>

</HEAD>

<FRAMESET ROWS="*,*">
<FRAME SRC="1.htm">
<FRAME SRC="2.htm">
</FRAMESET>

</FRAMESET>

</HTML>

С помощью данного HTML-кода будет создана требуемая структура, однако решение поставленной задачи невозможно. Необходимо вынести вложенную структуру <FRAMESET> в отдельный файл, а в данном HTML-коде описать фрейм, ссылающийся на созданный файл. Тогда текст исходного документа будет иметь вид:

<HTML>

<HEAD>

<TITLE>Пример взаимодействия между фреймами</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Созданный файл с вложенной структурой <FRAMESET> имеет имя 1_2.htm и содержит следующий код:

<HTML>

<HEAD>

</HEAD>

</FRAMESET>

</HTML>

На первый взгляд совершенно ничего не изменилось. В обоих случаях имеется три фрейма, в которые загружаются документы left.htm, 1.htm и 2.htm соответственно. Однако при взаимодействии фреймов различие проявится. Если в первом случае ни у одного из фреймов нет фрейма-родителя, то во втором случае для двух фреймов родительским будет фрейм с именем "Two_Frames". Поэтому если в любом из двух фреймов применить ссылку со значением параметра TARGET, равным "_parent", то результат будет различным для первого и второго случая. Для первого случая реализация такой ссылки приведет к загрузке документа в полное окно с замещением существующей структуры фреймов. Здесь проявляется свойство значения "_parent", которое при отсутствии фрейма-родителя действует как "_top". Во втором случае будет замещен фрейм с именем "Two_Frames", который занимает правую половину экрана и по существу состоит из двух фреймов.

Второй случай формально отличается от первого также наличием фрейма с именем "Two_Frames", к которому могут быть обращены ссылки. Как раз эта особенность и позволит нам решить поставленную задачу.

Приведем содержимое файла left.htm, который изначально загружается в первый из рассматриваемых фреймов:

<HTML>

<HEAD>

<TITLE>Левый фрейм</TITLE>

</HEAD>

<BODY>

Реализация любой ссылки во всех трех фреймах приводит к перезагрузке

документов в двух фреймах, расположенных в правой части окна.

<P>

Выберите вариант расположения документов:

<P>

<A HREF="1_2.htm" TARGET="Two_Frames">Вариант 1-2</А>

<P>

<A HREF="2_1.htm" TARGET="Two_Frames">Вариант 2-1</A>

</BODY>

</HTML>

В этом документе имеются ссылки на файлы 1_2.htm и 2_1.htm. Текст первого был дан выше, а второго имеет следующий вид:

<HTML>

<HEAD>

</HEAD>

</FRAMESET>

</HTML>

Заметим, что текст файлов 1_2.htm и 2_1.htm отличаются только порядком ссылок на файлы 1.htm и 2.htm.

Рассмотрим теперь построение документа, загруженного в левый фрейм. В нем имеется две ссылки с параметром TARGET="Two_Frames". Реализация любой из этих ссылок создает на месте расположения фрейма "Two_Frames" (это правая половина экрана) два фрейма с загрузкой документов 1.htm и 2.htm в том или ином порядке. Таким образом при выборе варианта 1-2 в верхний правый фрейм загружается документ 1.htm, а в нижний правый — 2.htm. При выборе варианта 2-1 порядок документов меняется. В итоге поочередный выбор вариантов создает впечатление того, что документы в двух фреймах меняются местами. Именно такого эффекта мы и стремились достичь (рис. 5.9).

Содержимое документов 1.htm и 2.htm для описанного примера не имеет значения. Тем не менее, для примера, вместо тривиальных документов создадим документы со ссылками, реализующими те же действия.

Текст файла 1.htm:

<HTML>

<HEAD>

<TITLE>Документ 1</TITLE>

</HEAD>

<BODY>

<H2>Документ 1</H2>

<A HREF="1_2.htm" TARGET="_parent">Вариант 1-2</A>

<P>

<A HREF="2_1.htm" TARGET="_parent">Вариант 2-1</A>

</BODY>

</HTML>

Файл 2.htm отличается от 1.htm только заголовком.

Здесь имеются две ссылки со значением TARGET="_parent", которые обращены к родительскому фрейму. Эти ссылки могли бы быть записаны и с явным указанием имени фрейма-родителя, т. е. TARGET="Two_Frames", однако использование неявного указания имени обычно более удобно. Например, если из левого фрейма (документ left.htm) исключить ссылки, то можно было бы опустить имя фрейма "Two_Frames", заданное при описании основной фреймовой структуры. При этом был бы создан фрейм без имени, но ссылки из документов 1.htm и 2.htm со значением TARGET="_parent" по-прежнему работали бы правильно.

Совет

По возможности используйте неявное указание имен фреймов. Например, " parent"," top"," self" вместо задания конкретных имен.

Рис. 5.9. Окна взаимодействующих фреймов с эффектом смены загружаемых документов