- •Лекция: Назначение и применение JavaScript, общие сведения
- •Способ 1: url-схема "JavaScript:"
- •Способ 2: обработчики событий
- •Способ 3: подстановки
- •Размещение кода внутри html-документа
- •Условная генерация html-разметки на стороне браузера
- •Комментарии в html и JavaScript
- •Указание языка сценария
- •Регистр символов
- •Лекция: Типы данных и операторы
- •Массивы
- •Метод join()
- •Метод reverse()
- •Метод sort()
- •Операторы языка
- •Лекция: Функции и объекты
- •Функции
- •Функция как тип данных
- •Функция как объект
- •Коллекции
- •Cвойства
- •События
- •Пользовательские объекты
- •Понятие пользовательского объекта
- •Прототип
- •Методы объекта Object
- •Лекция: Программируем свойства окна браузера Объект window
- •Свойства объекта window Поле статуса и свойство window.Status
- •Программируем status
- •Программируем defaultStatus
- •Поле адреса и свойство window.Location
- •Свойства объекта location
- •Методы объекта location
- •История посещений (history)
- •Тип браузера (navigator)
- •Методы объекта window
- •Методы focus() и blur()
- •Метод setTimeout()
- •Метод clearTimeout()
- •Методы setInterval() и clearInterval()
- •Фреймы (Frames)
- •Иерархия и именование фреймов
- •Коллекция фреймов
- •Передача данных во фрейм
- •Лекция: Программируем формы Контейнер form
- •Свойства объекта Form Свойство action
- •Свойство method
- •Свойство target
- •Свойство encoding
- •Коллекция elements[]
- •Методы объекта Form Метод submit()
- •Метод reset()
- •События объекта Form Событие Submit
- •Событие Reset
- •Поля формы и их объекты
- •Текстовое поле ввода (объект Text)
- •Списки вариантов (объекты Select и Option)
- •Создание объектов Option
- •Коллекция options[]
- •Свойства text и value объекта Option
- •Свойства selected и selectedIndex
- •Обработчик события onChange объекта Select
- •Кнопка button
- •Кнопка submit
- •Метод submit() формы
- •Кнопка reset
- •Графическая кнопка
- •6. Лекция: Программируем гипертекстовые переходы
- •Замена атрибута href
- •Изменение части url
- •События MouseOver и MouseOut
- •Обработка события Click
- •Лекция: Программируем графику Объект Image
- •Свойства src и lowSrc
- •Изменение картинки
- •Мультипликация
- •Обработчик события onLoad
- •Запуск и остановка мультипликации
- •Оптимизация отображения
- •Оптимизация при загрузке изображений
- •Предварительная загрузка изображений
- •Нарезка изображений
- •Графика и таблицы
- •Горизонтальное меню
- •Вертикальное меню
- •Выделение выбранного пункта меню
- •Вложенные меню
- •Лекция: Программируем "за кадром" Механизм cookie
- •Что такое cookie
- •Чтение cookie
- •Создание или изменение cookie
- •Удаление cookie
- •Демонстрационный пример
- •Управление фокусом
- •Управляем фокусом в окнах
- •Управление фокусом во фреймах
- •Фокус в полях формы
- •Скрытая передача данных из форм
- •Невидимый код
- •Невидимый фрейм
- •Код во внешнем файле
- •Обмен данными посредством встроенной графики
- •Модель безопасности
Фреймы (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 в отдельном файле.