Лекция: Передача данных во фрейм
Обычной задачей при разработке типового Web-узла является загрузка результатов исполнения CGI-скрипта во фрейм, отличный от фрейма, в котором вводятся данные для этого скрипта. Если путь загрузки результатов фиксированный, то можно просто использовать атрибут TARGET формы. Сложнее, если результат работы должен быть загружен в разные фреймы (например, в зависимости от выбранной кнопки).
Применим полученные нами знания для решения этой задачи. Сначала заготовим следующие файлы. Основной файл, например,index.htm, содержит левый фрейм, в котором будет находиться форма, и правый фрейм, разбитый на два подфрейма (верхний и нижний). Файл left.htm содержит форму, в которой пользователю предоставляется возможность выбрать верхний или нижний фрейм и нажать кнопку «Загрузить». Файл right.htm содержит простой текст; он будет загружаться в верхний или нижний фрейм, в зависимости от действий пользователя.
| Основной файл с тремя фреймами | Файл с формой left.htm в левом фрейме | Файл right.htm |
| <HTML><HEAD><TITLE>Три фрейма</TITLE></HEAD> <FRAMESET COLS=«50%,*»> <FRAME NAME=leftframe SRC=left.htm> <FRAMESET ROWS=«50%,*»> <FRAME NAME=topframe SRC=""> <FRAME NAME=botframe SRC=""> </FRAMESET> </FRAMESET></HTML> | <HTML><HEAD><SCRIPT SRC=«loadframe.js»></SCRIPT></HEAD><BODY> <FORM METHOD=post ACTION=right.htm NAME=f onSubmit=«return load();»> <SELECT NAME=s> <OPTION>верхний</OPTION> <OPTION>нижний</OPTION> </SELECT> <INPUT TYPE=submit VALUE=«Загрузить»> </FORM></BODY></HTML> | <HTML><BODY> Этот документ мы загружаемпри выборефреймаиз списка </BODY></HTML> |
Для того, чтобы пример заработал, остается в файле loadframe.js описать функцию load(). Функция должна делать так, чтобы в зависимости от выбора пользователем значения селектора «верхний» или «нижний» файл right.htm загружался бы либо в правый верхний, либо в правый нижний фрейм. С этой целью в файле left.htm у формы не был указан целевой фрейм(атрибут TARGET ).
Нашу задачу динамического выбора фрейма можно решать по-разному. Более изящный способ — переназначать «на лету» свойствоtarget, с него мы и начнем (открыть).
4.8. Файл loadframe.js: переназначение target на лету
Функция load() всегда возвращает true, а поскольку она вызывается из обработчика события onSubmit, это означает, что всегда будет происходить отправка формы (событие Submit ), т.е. загрузка страницы right.htm, указанной в атрибутеACTION данной формы. Обратите внимание также на следующие строки в функции load():
Смысл их таков: когда пользователь выбирает значение верхний или нижний в форме, то файл right.htm загружается в соответствующий фрейм, а оставшийся фрейм открывается на запись (методом ...document.open(), при этом всё его содержимое очищается) и закрывается (методом ...document.close() ), тем самым фрейм остаётся пустым (без текста).
Теперь рассмотрим второй подход — открытие окна с именем, совпадающим с именем фрейма topframe или botframe. Его идея состоит в том, что при попытке открыть окно с именем существующего окна новое окно не открывается, а используется уже открытое. Фрейм — это тоже окно, поэтому на него данное правило распространяется. Функция, реализующая такое поведение, приведена ниже (открыть):
4.9. Файл loadframe.js: использование window.open()
В этом подходе функция load() всегда возвращает false. Это необходимо, чтобы отменить отправку данных формы: ведь после того, как мы вызвали window.open(), в отправке данных формы, т.е. загрузке файла right.htm, уже нет надобности.