HTML DOM Window parent

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

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

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

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

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

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

Свойства объекта window для работы с фреймами

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

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

Читайте также:  Webpack bootstrap css loader

JavaScript - свойства объекта window для работы с фреймами

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

 window.frames[0]; window.frames[1]; window.frames[2];

Пример работы с фреймами в JavaScript

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

Свойство 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 для работы с фреймами:

   . 

Свойства объекта window для работы с фреймами


Изменить задний фон у фреймов

Фрейм 1

Фрейм 2

Фрейм 3

Фрейм 4

Это фрейм?
Вывести сообщение в основное окно
Вывести сообщение в родительское окно

Фрейм 5

Комментарии: 6

Подскажите пожалуйста, как при отработкке условия вывесити новую html страницу через фрейм?
Например имеется некое значение которое скрыто но при этом нам известно что это значениее имеется, эти значения вызываются во время обращения к ним, при обращении у каждого значения может выводится разный текст. При этом при совпадении значения в например case «11111111»: выводить сообщениее и перенаправлять на на новую заданную нами страницу html

function pan() { var findNumber = prompt ("Введите значение"); switch (findNumber) { case "11111111": document.write("Вывести 1"); break; case "22222222": document.write("Вывести 2"); break; case "3333333": document.write("Вывести 3"); break; case "4444444": document.write("Вывести 4"); break; default: document.write("Данное значение не найдено"); break; } } . document.write(""); .
  document.write("");
  

Источник

HTML DOM Window parent Property

The HTML DOM Window parent property returns a reference to the parent window of the child window.

Syntax

Returning reference of parent window

Example

Let us see an example of HTML DOM Window parent property −

       
HTML-DOM-Window-parent

Output

Clicking ‘Go To’ button with url field set −

Clicking ‘Close’ button −

Clicking ‘Restore’ button −

Источник

Window parent

The parent property returns the parent window (of the current window).

The parent property is read-only.

Note

The parent property is not the same as the top property.

window.parent returns the immediate parent of a window.

window.top returns the topmost window in the hierarchy of windows.

See Also:

Syntax

Return Value

More Examples

The location of the parent window:

Browser Support

window.parent is supported in all browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes Yes

Unlock Full Access 50% off

COLOR PICKER

colorpicker

Join our Bootcamp!

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials
Top References
Top Examples
Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Оцените статью