Фреймы (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. Два фрейма (html, txt)
Рис. 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. Три фрейма (html, txt)
Рис. 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 в отдельном файле.