Российский государственный гуманитарный университет
Опубликован: 14.08.2003 | Доступ: свободный | Студентов: 23389 / 4435 | Оценка: 4.00 / 3.90 | Длительность: 10:03:00
Лекция 4:

Программируем свойства окна браузера

Фреймы (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. Два фрейма
Окно с двумя вертикальными фреймами

Рис. 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. Три фрейма
Правый фрейм разбит на два по горизонтали

Рис. 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 в отдельном файле.

Коллекция фреймов

Выше мы обращались к фрейму по его имени. Однако, если имя не известно (или не задано), либо если нужно обратиться ко всем дочерним фреймам по очереди, то более удобным будет обращение через коллекцию фреймов 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';
Валерий Банатин
Валерий Банатин

function f() { var i=5; k=7; } f(); alert(k);

В примере выдается результат k=7, однако, хоть переменная и не объявлена, она внутри функции, т.е. локальная и не должна быть видима, или вторая и последующие все-таки становятся глобальными?

Дамир Кантюков
Дамир Кантюков

Изучаю курс введение в JavaScript. 4 уроке есть код, где метод присвоен переменной, почему у меня не работает, браузер гугл:

<HTML><HEAD> <SCRIPT> wid = window.open('','','width=750,height=100,status=yes'); wid.document.open(); R = wid.document.write; R('<HTML><HEAD><SCRIPT>var t;<\/SCRIPT></HEAD>'); R('<BODY><H1>Новое окно</H1></BODY></HTML>'); wid.document.close(); </SCRIPT> </HEAD> <BODY> <A HREF="javascript: wid.t=window.prompt('Новое состояние:',''); wid.document.write(wid.t); wid.focus(); void(0);" >Изменим значение переменной t в новом окне</A> </BODY></HTML>