Фреймы (Frames)

Фреймы - это несколько видоизмененные окна. Отличаются они от обычных окон тем, что размещаются внутри них. У фрейма не может быть ни панели инструментов, ни меню, как в обычном окне. В качестве поля статуса фрейм использует поле статуса окна, в котором он размещен. Существует и ряд других отличий.

Если окно имеет фреймовую структуру (т.е. вместо контейнера <BODY> в нем присутствует контейнер <FRAMESET> со вложенными в него контейнерами <FRAME> и быть может другими контейнерами <FRAMESET> ), то объект windowсоответствует внешнему контейнеру <FRAMESET>, а с каждым вложенным контейнером <FRAME> ассоциирован свой собственный объект класса Window.

Каждому окну или фрейму создатель страницы может дать имя - с помощью атрибута NAME контейнера FRAME, либо вторым аргументом метода window.open(). Используется оно в качестве значения атрибута TARGET контейнеров A и FORM, чтобы открыть ссылку или отобразить результаты работы формы в определенном окне или фрейме. Есть несколько зарезервированных имен окон: _self (имя текущего окна или фрейма, где исполняется скрипт), _blank (новое окно), _parent (окно-родитель для данного фрейма), _top (самый старший предок данного фрейма, т.е. окно браузера, частью которого является данныйфрейм). Иерархия фреймов, обсуждаемая ниже, как раз и задает, какие окна или фреймы являются родителями для другихфреймов.

У каждого объекта класса Window, будь то окно или фрейм, есть также ссылка на соответствующий объект. Как мы знаем, ссылкой на объект текущего окна, в котором исполняется скрипт, является window ; кроме того, на него же ссылается свойствоself объекта window (а также свойство window объекта window - есть и такое!). Ссылку на объект окна, открываемого методом window.open(), выдает сам этот метод. Ссылка на объект-фрейм совпадает с его именем, заданным с помощью атрибута NAME контейнера FRAME. Наконец, у объектов-фреймов есть специальные свойства, дающие ссылки на родительскийфрейм ( window.parent ) и на окно браузера, частью которого является данный фрейм ( window.top ).

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

Иерархия и именование фреймов

Рассмотрим сначала простой пример. Разделим экран на две вертикальные колонки:

<HTML>

<HEAD>

<TITLE>Левый и правый</TITLE>

</HEAD>

<FRAMESET COLS="50%,*">

<FRAME NAME=leftframe SRC=left.htm>

<FRAME NAME=rightframe SRC=right.htm>

</FRAMESET>

</HTML>

4.6. Два фрейма

Рис. 4.3. Окно с двумя вертикальными фреймами

Иерархия фреймов здесь получается следующая:

• window

  • leftframe

  • rightframe

Из основного окна (из скрипта, который можно было поместить в контейнер <HEAD> ) обратиться к левому фрейму можно с помощью window.leftframe, к правому - window.rightframe. Из каждого фрейма обратиться к основному окну можно какwindow.parent либо window.top (что в данном случае равносильно) или даже просто parent и top (так как приставкуwindow можно опускать). Наконец, из левого фрейма обратиться к правому фрейму можно как parent.rightframe илиtop.rightframe.

Усложним пример: разобьем правый фрейм на два по горизонтали:

<HTML>

<HEAD>

<TITLE>Левый, верх и низ</TITLE>

</HEAD>

<FRAMESET COLS="50%,*">

<FRAME NAME=leftframe SRC=left.htm>

<FRAMESET ROWS="50%,*">

<FRAME NAME=topframe SRC=top.htm>

<FRAME NAME=botframe SRC=bottom.htm>

</FRAMESET>

</FRAMESET>

</HTML>

4.7. Три фрейма

Рис. 4.4. Правый фрейм разбит на два по горизонтали

Фрейма с именем rightframe теперь не существует. Более того, все три фрейма непосредственно подчинены главному окну, т.е. иерархия выглядит следующим образом:

• window

  • leftframe

  • topframe

  • botframe

Следовательно, мы можем поместить в контейнер <HEAD> следующий скрипт, устанавливающий цвет фона для всех трехфреймов: (открыть)

<SCRIPT>

window.onload=f;

function f()

{

window.leftframe.document.bgColor='blue';

window.topframe.document.bgColor='red';

window.botframe.document.bgColor='green';

}

</SCRIPT>

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

Основной документ	Документ в правом фрейме ( right.htm )
<HTML> <HEAD> </HEAD> <FRAMESET COLS="50%,*"> <FRAME NAME=leftframe SRC=left.htm> <FRAME NAME=rightframe SRC=right.htm> </FRAMESET> </HTML>	<HTML> <HEAD> </HEAD> <FRAMESET ROWS="50%,*"> <FRAME NAME=topframe SRC=top.htm> <FRAME NAME=botframe SRC=bottom.htm> </FRAMESET> </HTML>

В этом случае иерархия фреймов будет выглядеть иначе:

• window

  • leftframe

  • rightframe

    • topframe

    • botframe

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

window.leftframe.document.bgColor='blue';

window.rightframe.topframe.document.bgColor='red';

window.rightframe.botframe.document.bgColor='green';

Таким образом, визуально на Web-странице мы получили тот же результат, что и с тремя фреймами, подчиненными одному старшему окну (см. пример 4.7). Однако этот вариант более гибкий: он позволяет работать независимо с фреймом rightframe в отдельном файле.