JavaScript - Объект window: фреймы

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

Что такое фреймы

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

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

<iframe src="http://getbootstrap.com/"></iframe>

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

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

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

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

Свойства объекта 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

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

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

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

Свойство length

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

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

var ifremesCount = window.length;

Свойство frames

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

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

window.frames[0].location="http://getbootstrap.com/";

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

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

Свойство parent

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

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

window.parent.document.body.style.backgroundColor = "red";

Свойство top

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

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

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

Свойство self

Свойство 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>