 ПОЗНАВАТЕЛЬНОЕ
| Иерархия и именование фреймов
Рассмотрим сначала простой пример. Разделим экран на две вертикальные колонки: <HTML> <HEAD> <TITLE>Левый и правый</TITLE> </HEAD> <FRAMESET COLS="50%,*"> <FRAME NAME=leftframe SRC=left.htm> <FRAME NAME=rightframe SRC=right.htm> </FRAMESET> </HTML> 4.6. Два фрейма
Иерархия фреймов здесь получается следующая: · window o leftframe o 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. Три фрейма
Фрейма с именем rightframe теперь не существует. Более того, все три фрейма непосредственно подчинены главному окну, т.е. иерархия выглядит следующим образом: · window o leftframe o topframe o 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 мы должны загрузить отдельный фреймовый документ.
В этом случае иерархия фреймов будет выглядеть иначе: · window o leftframe o rightframe § topframe § botframe Теперь чтобы из главного окна обратиться ко всем трем фреймам и установить в них те же цвета фона, следует писать: window.leftframe.document.bgColor='blue'; window.rightframe.topframe.document.bgColor='red'; window.rightframe.botframe.document.bgColor='green'; Таким образом, визуально на Web-странице мы получили тот же результат, что и с тремя фреймами, подчиненными одному старшему окну (см. пример 4.7). Однако этот вариант более гибкий: он позволяет работать независимо с фреймом rightframe в отдельном файле. Коллекция фреймов Выше мы обращались к фрейму по его имени. Однако, если имя не известно (или не задано), либо если нужно обратиться ко всем дочерним фреймам по очереди, то более удобным будет обращение через коллекцию фреймов frames[], которая является свойством объектаwindow. В качестве иллюстрации предположим, что в примере из двух фреймов (пример 4.6) правый фрейм содержит несколько изображений, и нам требуется поменять адрес (значение атрибута SRC ) третьего изображения с помощью скрипта, находящегося в левом фрейме. Правыйфрейм - второй, значит, его номер 1; третье изображение имеет номер 2. Поэтому, это можно сделать следующими способами: top.frames[1].document.images[2].src = 'pic.gif'; top.frames['rightframe'].document.images[2].src = 'pic.gif'; top.frames.rightframe.document.images[2].src = 'pic.gif'; top.rightframe.document.images[2].src = 'pic.gif'; Передача данных во фрейм Обычной задачей при разработке типового Web-узла является загрузка результатов исполнения CGI-скрипта во фрейм, отличный от фрейма, в котором вводятся данные для этого скрипта. Если путь загрузки результатов фиксированный, то можно просто использовать атрибутTARGET формы. Сложнее, если результат работы должен быть загружен в разные фреймы (например, в зависимости от выбранной кнопки). Применим полученные нами знания для решения этой задачи. Сначала заготовим следующие файлы. Основной файл, например,index.htm, содержит левый фрейм, в котором будет находиться форма, и правый фрейм, разбитый на два подфрейма (верхний и нижний). Файл left.htm содержит форму, в которой пользователю предоставляется возможность выбрать верхний или нижний фрейм и нажать кнопку "Загрузить". Файл right.htm содержит простой текст; он будет загружаться в верхний или нижний фрейм, в зависимости от действий пользователя.
Для того, чтобы пример заработал, остается в файле loadframe.js описать функцию load(). Функция должна делать так, чтобы в зависимости от выбора пользователем значения селектора "верхний" или "нижний" файл right.htm загружался бы либо в правый верхний, либо в правый нижний фрейм. С этой целью в файле left.htm у формы не был указан целевой фрейм (атрибут TARGET ). Нашу задачу динамического выбора фрейма можно решать по-разному. Более изящный способ - переназначать "на лету" свойство target, с него мы и начнем (открыть). function load() { if(document.f.s.selectedIndex==0) { document.f.target = "topframe"; top.frames[2].document.open(); top.frames[2].document.close(); } else { document.f.target = "botframe"; top.frames[1].document.open(); top.frames[1].document.close(); } return true; } 4.8. Файл loadframe.js: переназначение target на лету Функция load() всегда возвращает true, а поскольку она вызывается из обработчика события onSubmit, это означает, что всегда будет происходить отправка формы (событие Submit ), т.е. загрузка страницы right.htm, указанной в атрибуте ACTION данной формы. Обратите внимание также на следующие строки в функции load(): top.frames[1].document.open(); top.frames[1].document.close(); Смысл их таков: когда пользователь выбирает значение верхний или нижний в форме, то файл right.htm загружается в соответствующий фрейм, а оставшийся фрейм открывается на запись (методом ...document.open(), при этом всё его содержимое очищается) и закрывается (методом ...document.close() ), тем самым фрейм остаётся пустым (без текста). Теперь рассмотрим второй подход - открытие окна с именем, совпадающим с именем фрейма topframe или botframe. Его идея состоит в том, что при попытке открыть окно с именем существующего окна новое окно не открывается, а используется уже открытое. Фрейм - это тоже окно, поэтому на него данное правило распространяется. Функция, реализующая такое поведение, приведена ниже (открыть): function load() { if(document.f.s.selectedIndex==0) { window.open("right.htm","topframe"); top.frames[2].document.open(); top.frames[2].document.close(); } else { window.open("right.htm","botframe"); top.frames[1].document.open(); top.frames[1].document.close(); } return false; } 4.9. Файл loadframe.js: использование window.open() В этом подходе функция load() всегда возвращает false. Это необходимо, чтобы отменить отправку данных формы: ведь после того, как мы вызвали window.open(), в отправке данных формы, т.е. загрузке файла right.htm, уже нет надобности.
|
