Какие свойства относятся к свойствам объекта frames

На этом уроке мы познакомимся со свойствами объекта window, которые предназначены для работы с фреймами (iframe).

Фреймы – это элементы HTML, которые используются для внедрения в текущую страницу других веб-страниц. Фреймы в HTML5 представлены с помощью элемента iframe (<iframe></iframe>). Для указания URL, который будет отображаться внутри фрейма (iframe) используется атрибут src.

Например, внутри фрейма отобразим страницу “https://getbootstrap.com/”.

Фреймы немного похожи с картинками, только вместо картинки отображается внешний ресурс (HTML страница). Размещать фреймы (iframe) можно в любом месте страницы. Они относятся к строчным элементам. Кроме атрибута src у тега iframe есть множество других атрибутов: width (ширина), height (высота), name (имя) и др.

Например, создадим веб-страницу, содержащую ссылку и фрейм с именем. При нажатии на ссылку будем открывать в этом фрейме указанную веб-страницу.

<a href=”https://getbootstrap.com/” target=”iframeBootstrap”>Открыть ссылку во фрейме</a>
<iframe name=”iframeBootstrap”></iframe>

С точки зрения объектной модели браузера фреймы (iframe) – это тоже окна (объекты window), которые можно расположить в основном окне (вкладке) браузера или в другом фрейме.

Для работы с фреймами объект window содержит следующие свойства: frameElement, frames, length, self, parent и top. Разберём назначение этих свойств на примере.

Рассмотрим окно, состоящее из 5 фреймов (<iframe>…</iframe>). Первые три фрейма (1,2 и 3) расположены непосредственно в этом окне, а остальные 2 фрейма (4 и 5) расположены во фрейме 2.

Для фрейма 4:

свойство parent, возвращает родительское окно (объект window), т.е. фрейм 2.
свойство top, возвращает прародителя (предка), т.е. основное окно (вкладку), куда загружены все фреймы.
свойство self, возвращает текущий объект window, т.е. фрейм 4.

Для фрейма 2:

свойство parent, возвращает родительское окно (объект window), т.е. основное окно (вкладку).
свойство top, возвращает прародителя (предка), т.е. основное окно (вкладку), куда загружены все фреймы.
свойство self, возвращает текущий объект window, т.е. фрейм 2.

Свойство frameElement возвращает сам элемент iframe, или null если он таковым не является (например, если он является обычным окном, а не фреймом).

Свойство length обычно используется совместно со свойством frames и возвращает количество фреймов, содержащихся в текущем окне или фрейме. Например, в нашем примере свойство length для окна 2, вернёт значение 2. А для основного окна, свойство length вернёт значение 3. Свойство frames возвращает массив объектов window, каждый из которых отвечает за вложенный в это окно фрейм (iframe). Фреймы с логической точки зрения тоже являются окошечками, т.е. для каждого фрейма создаётся свой собственный объект window.

Вернёмся к нашему примеру, в котором основное окно (вкладка) браузера содержит 3 фрейма. В этом месте возникает вопрос: “А сколько всего объектов window будет создано?”. В нашем случае будет создано 4 объекта window. Первый объект window будет отвечать за основное окно (вкладку) браузера. Три остальных объекта window будут отвечать за каждый из фреймов, непосредственно расположенных в этом окне. Эти объекты window, т.е. те которые отвечают за каждый фрейм, образуют массив frames, который можно получить как свойство объекта window.

Например:

<!–1 фрейм–>
window.frames[0];
<!–2 фрейм–>
window.frames[1];
<!–3 фрейм–>
window.frames[2];

Свойство frameElement возвращает элемент iframe, если текущее окно является фреймом. В противном случае данное свойство, возвращает значение null (т.е. данное окно не является фреймом).

Например, узнать является ли текущее окно фреймом (iframe) и если является, то изменить его URL на “https://getbootstrap.com/”:

//получить элемент iframe или значение null
var iframe = window.frameElement;
//Если окно является фреймом (iframe), то изменить URL фрейма на “https://getbootstrap.com/”
if (iframe) {
iframe.src=”https://getbootstrap.com/”;
}

Свойство length возвращает количество фреймов (iframe) в текущем окне. Это свойство очень часто используется совместно со свойством frames. Свойство length доступно только дли чтения.

Например, получить количество фреймов (iframe) в текущем окне:

var ifremesCount = window.length;

Свойство frames возвращает массив фреймов (объектов window), расположенных а текущем окне. Доступ к фрейму (объекту window) осуществляется по индексу (отсчёт индексов начинаются с 0). Для определения количества фреймов в текущем окне или фрейме используйте свойство length.

Например, изменить URL первого фрейма (т.е. фрейма с индексом 0), который расположен а текущем окне:

window.frames[0].location=”https://getbootstrap.com/”;

Например, изменить URL всех фреймов расположенных в текущем окне на “https://getbootstrap.com/”:

var frames = window.frames;
for (i=0;i<iframes.length;i++) {
iframes[i].location=”https://getbootstrap.com/”;
}

Свойство parent возвращает родительский объект window no отношению к текущему объекту window. Данное свойство доступно только для чтения.

Например, установить задний фон родительскому объекту window:

window.parent.document.body.style.backgroundColor = “red”;

Свойство top возвращает основное окно (вкладку).

Например, определим, является ли данное окно основным окном:

function checkWindow() {
if (window.top != window.self)
{
document.getElementById(“checkWindow”).innerHTML = “Это не основное окно (вкладка)”;
}
else
{
document.getElementById(“checkWindow”).innerHTML = “Это основное окно”;
}
}

Свойство self возвращает текущее окно. Данное свойство обычно используется в операциях сравнения и доступно только для чтения.

Рассмотрим наиболее сложный пример, в мотором продемонстрируем использование всех свойств объекта window для работы с фреймами:

<!–index.html–>
<script>
function changeBackgroundFrames() {
var iframes = window.frames;
alert(iframes.length);
for (i=0;i<iframes.length;i++) {
iframes[i].document.body.style.background = “green”;
}
}
</script>
…
<h1>Свойства объекта window для работы с фреймами</h1>
<p id=”test”></p>
<br />
<a href=”javascript:changeBackgroundFrames()”>Изменить задний фон у фреймов</a>
<br />
<iframe src=”index1.html”></iframe>
<iframe src=”index2.html” width=”500″ height=”400″></iframe>
<iframe src=”index3.html”></iframe>

<!–index1.html–>
<h2>Фрейм 1</h2>

<!–index2.html–>
<h2>Фрейм 2</h2>
<p id=”test”></p>
<iframe src=”index4.html”></iframe>
<iframe src=”index5.html”></iframe>

<!–index3.html–>
<h2>Фрейм 3</h2>

<!–index4.html–>
<script>
function checkFrame() {
var iframe = window.frameElement;
//Вывести сообщение
if (iframe)
alert(“Это фрейм”);
else alert(“Это не фрейм”);
}
function writeTopWindow() {
window.top.document.getElementById(“test”).innerHTML = “Привет из 4 фрейма”;
}
function writeParentWindow() {
window.parent.document.getElementById(“test”).innerHTML = “Привет из 4 фрейма”;
}
</script>
<h2>Фрейм 4</h2>
<a href=”javascript:checkFrame()”>Это фрейм?</a>
<br />
<a href=”javascript:writeTopWindow()”>Вывести сообщение в основное окно</a>
<br />
<a href=”javascript:writeParentWindow()”>Вывести сообщение в родительское окно</a>

<!–index5.html–>
<h2>Фрейм 5</h2>

Источник

Аннотация: Рассматриваются вопросы программирования свойств окна браузера, управление окнами, а также работа с фреймами.

Объект window

Класс объектов Window – это самый старший класс в иерархии объектов JavaScript. Объект window, относящийся к текущему окну (т.е. в котором выполняется скрипт), является объектом класса Window. Класс объектов Frame содержится в классе Window, т.е. каждый фрейм – это тоже объект класса Window.

О фреймах речь пойдет ниже, а пока вернемся к объекту window. Объект window создается только в момент открытия окна. Все остальные объекты, которые порождаются при загрузке страницы, есть свойства объекта window. Более того, все глобальные переменные, определенные в данном окне, тоже являются свойствами объекта window. Таким образом, у объекта window могут быть разные свойства при загрузке разных страниц. Кроме того, в разных браузерах свойства объектов и поведение объектов и браузера при обработке событий может быть различным. При программировании на JavaScript чаще всего используют следующие свойства, методы и события объекта window:

Таблица
4.1.
Свойства, методы и события объекта window

Свойства	Методы	События
status defaultStatus location history navigator document frames[] opener parent self top	open() close() focus() blur() alert() confirm() prompt() setTimeout() setInterval() clearTimeout() clearInterval()	Load Unload Focus Blur Resize Error

Поскольку объект window является самым старшим, то в большинстве случаев при обращении к его свойствам и методам приставку ” window.” можно опускать (разумеется, в случае, если вы хотите обратиться к свойству или методу текущего окна, где работает скрипт; если же это другое окно, то необходимо указать его идентификатор). Так, например, можно писать alert(‘Привет’) вместо window.alert(‘Привет’), или location вместо window.location. Исключениями из этого правила являются вызовы методов open() и close(), у которых нужно указывать имя окна, с которым работаем (родительское в первом случае и дочернее во втором). Свойства frames[], self, parent и top будут рассмотрены в разделе, посвященном фреймам. Свойство opener будет рассмотрено при описании метода window.close().

Свойства объекта window

Поле статуса и свойство window.status

Поле статуса – это первое, что начали использовать авторы HTML-страниц из арсенала JavaScript. Калькуляторы, игры, математические вычисления и другие элементы выглядели слишком искусственно. На их фоне бегущая строка в поле статуса была изюминкой, которая могла действительно привлечь внимание пользователей к Web-узлу. Постепенно ее популярность сошла на нет. Бегущие строки стали редкостью, но программирование поля статуса встречается на многих Web-узлах.

Рис.
4.1.
Поле статуса

Полем статуса (status bar) называют поле нижней части окна браузера сразу под областью отображения HTML-страницы. В поле статуса отображается информация о состоянии браузера (загрузка документа, загрузка графики, завершение загрузки, запуск апплета и т.п.). Программа на JavaScript имеет возможность работать с этим полем как с изменяемым свойством окна. При этом фактически с ним связаны два разных свойства:

window.status – значение поля статуса;
window.defaultStatus – значение поля статуса по умолчанию.

Значение свойства status можно изменить – и оно тут же будет отображено в поле статуса. Свойство defaultStatus тоже можно менять – и сразу по его изменении оно отображается в поле статуса.

Разница между этими двумя свойствами заключается в их поведении: если свойству status присвоить пустую строку: window.status=””, то в поле статуса автоматически будет отображено значение defaultStatus. Обратного же не происходит: при присвоении пустой строки свойству defaultStatus оно и отобразится в поле статуса, независимо от значения свойства status. Следует отметить, что реакция браузеров на описываемые ниже действия со свойствами status и defaultStatus может быть разной в различных браузерах.

Программируем status

Свойство status связано с отображением сообщений о событиях, отличных от простой загрузки страницы.
Например, в Internet Explorer при наведении указателя мыши на ссылку обработчик onMouseOver помещает в поле статуса значение URL, указанное в атрибуте HREF этой ссылки (при этом никак не меняя значения свойств status и defaultStatus ). При попадании же курсора мыши на область, свободную от ссылок, обработчик onMouseOut возвращает в поле статуса значение defaultStatus, при условии, что оно не есть пустая строка (опять же никак не меняя значений обоих свойств). Мы можем изменить это поведение, например, как в следующем примере:

<A onMouseOver=”window.status=’Мышь над ссылкой’;return true;”
onMouseOut=”window.status=’Мышь увели со ссылки’;”
HREF=”https://site.com/”>Наведите мышь на ссылку и следите за полем статуса</A>

Обратите внимание на оператор return true в конце обработчика событий onMouseOver. Он необходим для того, чтобы отменить действие по умолчанию (в данном случае – вывод URL в поле статуса), которое, в отсутствие этого оператора, браузер выполнил бы сразу после вывода нами своей строки в поле статуса, и пользователь не успел бы увидеть нашу строку. Аналогичный трюк отмены действия по умолчанию годится и для некоторых других событий ( onClick, onKeyDown, onKeyPress, onMouseDown, onMouseUp, onSubmit, onReset ), с той лишь разницей, что для перечисленных обработчиков отмена выполняется оператором return false.

Для обработчика onMouseOut такого способа отменить действие по умолчанию не существует (к сожалению). Но в данном конкретном случае это не требуется – как уже было сказано, при уводе курсора со ссылки в поле статуса восстанавливается значение defaultStatus только в случае, если это значение не есть пустая строка. Но в нашем случае (по умолчанию при загрузке страницы в IE) оно равно именно пустой строке. Поэтому, уводя курсор с нашей ссылки, мы продолжаем видеть в поле статуса строку “Мышь увели со ссылки”. Ситуация изменится в следующем примере, когда мы предварительно зададим свое (непустое) значение defaultStatus.

Программируем defaultStatus

Свойство defaultStatus определяет текст, отображаемый в поле статуса, когда никаких событий не происходит. Дополним предыдущий пример изменением этого свойства в момент окончания загрузки документа, т.е. в обработчике onLoad:

<A onMouseOver=”window.status=’Мышь над ссылкой’;return true;”
onMouseOut=”window.status=’Мышь увели со ссылки’; alert(‘Ждем’);”
HREF=”https://site.com/”>Наведите мышь на ссылку и следите за полем статуса</A>

</BODY>

Сразу после загрузки документа в поле статуса будет “Значение по умолчанию”. При наведении указателя мыши на ссылку в поле статуса появится надпись “Мышь над ссылкой”, при этом URL ссылки ( https://site.com/ ) в поле статуса не появится, т.к. мы подавили его вывод оператором return true.

При убирании указателя мыши со ссылки пользователь бы не успел увидеть строку “Мышь увели со ссылки”, поскольку действие по умолчанию (вывод значения defaultStatus в поле статуса) не подавлено (и не может быть подавлено – у обработчика onMouseOut нет такой возможности). Однако мы ввели оператор вывода окна предупреждения alert(‘Ждем’) (он рассматривается ниже) – и теперь пользователь будет видеть в поле статуса строку “Мышь увели со ссылки” до тех пор, пока не нажмет OK в этом окне.

Источник

Фреймы (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>
</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’;

Источник