Книга: JavaScript. Подробное руководство, 6-е издание

14.8.2. Отношения между фреймами

14.8.2. Отношения между фреймами

Мы уже видели, что метод open() объекта Window возвращает новый объект Window, свойство opener которого ссылается на первоначальное окно. Таким образом, два окна могут ссылаться друг на друга, и каждое из них может читать свойства и вызывать методы другого. То же самое возможно для фреймов. Сценарий, выполняющийся в окне или фрейме, может ссылаться на объемлющее или вложенное окно или фрейм при помощи свойств, описываемых ниже.

Как вы уже знаете, сценарий в любом окне или фрейме может сослаться на собственное окно или фрейм с помощью свойства window или self. Фрейм может сослаться на объект Window вмещающего окна или фрейма с помощью свойства parent:

parent.history.back();

Объект Window, представляющий окно верхнего уровня или вкладку, не имеет вмещающего окна, поэтому его свойство parent просто ссылается на само окно:

parent == self; // Для любых окон верхнего уровня

Если фрейм находится внутри другого фрейма, содержащегося в окне верхнего уровня, то он может сослаться на окно верхнего уровня так: parent.parent. Однако в качестве универсального сокращения имеется свойство top: независимо от глубины вложенности фрейма его свойство top ссылается на содержащее его окно самого верхнего уровня. Если объект Window представляет окно верхнего уровня, свойство top просто ссылается на само окно. Для фреймов, непосредственно принадлежащих окну верхнего уровня, значение свойства top совпадает со значением свойства parent.

Свойства parent и top позволяют сценариям ссылаться на родительские окна или фреймы. Существует несколько способов сослаться на дочерние окна или фреймы. Фреймы создаются с помощью элементов <iframe>. Получить ссылку на объект Element, представляющий элемент <iframe>, можно точно так же, как на объект, представляющий любой другой элемент. Допустим, что документ содержит тег <iframe>. Тогда получить ссылку на объект Element, представляющий этот элемент iframe можно следующим образом:

var iframeElement = document.getElementById("f1");

Элементы <iframe> имеют свойство contentWindow, которое ссылается на объект Window фрейма, поэтому ссылку на объект Window этого фрейма можно получить так:

var childFrame = document.getElementByld("fl").contentWindow;

Имеется возможность пойти обратным путем - от объекта Window, представляющего фрейм, к объекту Element элемента <iframe>, содержащего фрейм, - с помощью свойства frameElement объекта Window. Объекты Window, представляющие окна верхнего уровня, а не фреймы, имеют значение null в свойстве frameElement:

var elt = document.getElementByld('fl');
var win = elt.contentWindow;
win.frameElement === elt // Всегда верно для фреймов
window.frameElement === null // Для окон верхнего уровня

Однако, чтобы получить ссылки на дочерние фреймы, обычно не требуется использовать метод getElementByld() и свойство contentWindow. Каждый объект Window имеет свойство frames, хранящее ссылки на дочерние фреймы, содержащиеся в окне или фрейме. Свойство frames ссылается на объект, подобный массиву, который может индексироваться числовыми индексами или именами фреймов. Получить ссылку на первый дочерний фрейм в окне можно с помощью выражения frames[0]. Сослаться на третий дочерний фрейм во втором дочернем фрейме можно с помощью выражения frames[1].frames[2]. Сценарий, выполняющийся во фрейме, может сослаться на соседний фрейм одного с ним уровня, как parent.frames[1]. Обратите внимание, что элементами массива frames[] являются объекты Window, а не элементы <iframe>.

Если в элементе <iframe> указать атрибут name или id, в качестве индекса этого фрейма можно будет использовать не только число, но и имя. Например, ссылку на фрейм с именем «И» можно получить с помощью выражения frames["f1"] или frames.f1.

В разделе 14.7 говорилось, что имена или идентификаторы элементов <iframe> и других автоматически превращаются в свойства объекта Window и что элементы <iframe> интерпретируются иначе, чем другие элементы: в случае с фреймами значениями этих автоматически создаваемых свойств становятся ссылки на объекты Window, а не на объекты Element. Это означает, что на фрейм с именем "f1" можно сослаться как на свойство f1 вместо frames.f1. В действительности, стандарт HTML5 указывает, что свойство frames, подобно свойствам window и self, ссылается на сам объект Window, который действует как массив фреймов. Это означает, что на первый дочерний фрейм можно сослаться, как window[0], а получить количество фреймов можно, обратившись к свойству window.length или просто length. Однако использование свойства frames вместо window в подобных случаях делает программный код более понятным. Обратите внимание, что не во всех текущих броузерах выполняется условие frame==window, но даже в броузерах, где это условие не выполняется, разрешается индексировать дочерние фреймы числами и именами, обращаясь к любому из этих двух объектов.

С помощью атрибута name или id элементу <iframe> можно присвоить имя, которое будет доступно для использования в JavaScript-коде. Однако если использовать атрибут name, указанное имя также будет использоваться в качестве значения свойства name объекта Window, представляющего фрейм. Имя, указанное таким способом, можно использовать в качестве значения атрибута target ссылки и передавать методу window.open() во втором аргументе.

Оглавление книги