- •Лекция 1: Назначение и применение JavaScript, общие сведения
- •Способ 1: url-схема "JavaScript:"
- •Способ 2: обработчики событий
- •Способ 3: подстановки
- •Размещение кода внутри html-документа
- •Условная генерация html-разметки на стороне браузера
- •Комментарии в html и JavaScript
- •Указание языка сценария
- •Регистр символов
- •2. Лекция: Типы данных и операторы
- •Массивы
- •Метод join()
- •Метод reverse()
- •Метод sort()
- •Операторы языка
- •3. Лекция: Функции и объекты
- •Функции
- •Функция как тип данных
- •Функция как объект
- •Объекты
- •Операторы работы с объектами
- •Клиентские объекты
- •Иерархия классов dom
- •Коллекции
- •Cвойства
- •События
- •Пользовательские объекты
- •Понятие пользовательского объекта
- •Прототип
- •Методы объекта Object
- •4. Лекция: Программируем свойства окна браузера Объект window
- •Свойства объекта window Поле статуса и свойство window.Status
- •Программируем status
- •Программируем defaultStatus
- •Поле адреса и свойство window.Location
- •Свойства объекта location
- •Методы объекта location
- •История посещений (history)
- •Тип браузера (navigator)
- •Методы объекта window
- •Методы focus() и blur()
- •Метод setTimeout()
- •Метод clearTimeout()
- •Методы setInterval() и clearInterval()
- •События объекта window
- •Переменные как свойства окна
- •Объект document
- •Фреймы (Frames)
- •Иерархия и именование фреймов
- •Коллекция фреймов
- •Передача данных во фрейм
Коллекция фреймов
Выше мы обращались к фрейму по его имени. Однако, если имя не известно (или не задано), либо если нужно обратиться ко всем дочерним фреймам по очереди, то более удобным будет обращение через коллекцию фреймов 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 содержит простой текст; он будет загружаться в верхний или нижний фрейм, в зависимости от действий пользователя.
|
Основной файл с тремя фреймами |
Файл с формой 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, с него мы и начнем (открыть).
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 на лету (html, txt)
Функция 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() (html, txt)
В этом подходе функция load() всегда возвращает false. Это необходимо, чтобы отменить отправку данных формы: ведь после того, как мы вызвали window.open(), в отправке данных формы, т.е. загрузке файла right.htm, уже нет надобности.