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

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

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

Фреймы — это элементы 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.

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

Свойство frameElement

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

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

Свойство length

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

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

Свойство frames

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

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

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

Свойство parent

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

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

Свойство top

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

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

Свойство self

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

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

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

When to use window.opener / window.parent / window.top

In JavaScript when to use window.opener / window.parent / window.top ?

4 Answers 4

• window.opener refers to the window that called window.open( . ) to open the window from which it’s called
• window.parent refers to the parent of a window in a or
• window.top refers to the top-most window from a window nested in one or more layers of sub-windows

Those will be null (or maybe undefined ) when they’re not relevant to the referring window’s situation. («Referring window» means the window in whose context the JavaScript code is run.)

I think you need to add some context to your question. However, basic information about these things can be found here:

I’ve used window.opener mostly when opening a new window that acted as a dialog which required user input, and needed to pass information back to the main window. However this is restricted by origin policy, so you need to ensure both the content from the dialog and the opener window are loaded from the same origin.

I’ve used this mostly when working with IFrames that need to communicate with the window object that contains them.

This is useful for ensuring you are interacting with the top level browser window. You can use it for preventing another site from iframing your website, among other things.

If you add some more detail to your question, I can supply other more relevant examples.

UPDATE: There are a few ways you can handle your situation.
You have the following structure:

• Main Window
  • Dialog 1
    • Dialog 2 Opened By Dialog 1

When Dialog 1 runs the code to open Dialog 2, after creating Dialog 2, have dialog 1 set a property on Dialog 2 that references the Dialog1 opener.

So if «childwindow» is you variable for the dialog 2 window object, and «window» is the variable for the Dialog 1 window object. After opening dialog 2, but before closing dialog 1 make an assignment similar to this:

Calling a parent window function from an iframe

I want to call a parent window JavaScript function from an iframe.

10 Answers 10

Returns a reference to the parent of the current window or subframe.

If a window does not have a parent, its parent property is a reference to itself.

When a window is loaded in an , , or , its parent is the window with the element embedding the window.

Window.postMessage()

This method safely enables cross-origin communication.

And if you have access to parent page code then any parent method can be called as well as any data can be passed directly from Iframe . Here is a small example:

Parent page:

Iframe code:

Security note:

Always provide a specific targetOrigin, NOT * , if you know where the other window’s document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site (comment by ZalemCitizen).

References:

I recently had to find out why this didn’t work too.

The javascript you want to call from the child iframe needs to be in the head of the parent. If it is in the body, the script is not available in the global scope.

Hope this helps anyone that stumbles upon this issue again.

I have posted this as a separate answer as it is unrelated to my existing answer.

This issue recently cropped up again for accessing a parent from an iframe referencing a subdomain and the existing fixes did not work.

This time the answer was to modify the document.domain of the parent page and the iframe to be the same. This will fool the same origin policy checks into thinking they co-exist on exactly the same domain (subdomains are considered a different host and fail the same origin policy check).

Insert the following to the of the page in the iframe to match the parent domain (adjust for your doctype).

Please note that this will throw an error on localhost development, so use a check like the following to avoid the error:

Открытие окон и методы window

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/popup-windows.

Всплывающее окно («попап» – от англ. Popup window) – один из старейших способов показать пользователю ещё один документ.

В этой статье мы рассмотрим открытие окон и ряд тонких моментов, которые с этим связаны.

…При запуске откроется новое окно с указанным URL.

Большинство браузеров по умолчанию создают новую вкладку вместо отдельного окна, но чуть далее мы увидим, что можно и «заказать» именно окно.

Блокировщик всплывающих окон

Рекламные попапы очень надоели посетителям, аж со времён 20-го века, поэтому современные браузеры всплывающие окна обычно блокируют. При этом пользователь, конечно, может изменить настройки блокирования для конкретного сайта.

Всплывающее окно блокируется в том случае, если вызов window.open произошёл не в результате действия посетителя.

Как же браузер понимает – посетитель вызвал открытие окна или нет?

Для этого при работе скрипта он хранит внутренний «флаг», который говорит – инициировал посетитель выполнение или нет. Например, при клике на кнопку весь код, который выполнится в результате, включая вложенные вызовы, будет иметь флаг «инициировано посетителем» и попапы при этом разрешены.

А если код был на странице и выполнился автоматически при её загрузке – у него этого флага не будет. Попапы будут заблокированы.

Полный синтаксис window.open

Функция возвращает ссылку на объект window нового окна, либо null , если окно было заблокировано браузером.

url URL для загрузки в новое окно. name Имя нового окна. Может быть использовано в параметре target в формах. Если позднее вызвать window.open() с тем же именем, то браузеры (кроме IE) заменяют существующее окно на новое. params Строка с конфигурацией для нового окна. Состоит из параметров, перечисленных через запятую. Пробелов в ней быть не должно.

Значения параметров params .

1. Настройки расположения окна:

left/top (число)

Координаты верхнего левого угла относительно экрана. Ограничение: новое окно не может быть позиционировано за пределами экрана.

Ширина/высота нового окна. Минимальные значения ограничены, так что невозможно создать невидимое окно с нулевыми размерами.

Если координаты и размеры не указаны, то обычно браузер открывает не окно, а новую вкладку.

1. Свойства окна:

menubar (yes/no) Скрыть или показать строку меню браузера. toolbar (yes/no) Показать или скрыть панель навигации браузера (кнопки назад, вперёд, обновить страницу и остальные) в новом окне. location (yes/no) Показать/скрыть поле URL-адреса в новом окне. По умолчанию Firefox и IE не позволяют скрывать строку адреса. status (yes/no) Показать или скрыть строку состояния. С другой стороны, браузер может в принудительном порядке показать строку состояния. resizable (yes/no) Позволяет отключить возможность изменять размеры нового окна. Значение no обычно неудобно посетителям. scrollbars (yes/no) Разрешает убрать полосы прокрутки для нового окна. Значение no обычно неудобно посетителям.

1. Ещё есть небольшое количество не кросс-браузерных свойств, которые обычно не используются. Вы можете узнать о них в документации, например MDN: window.open.

Браузер подходит к этим параметрам интеллектуально. Он может проигнорировать их часть или даже все, они скорее являются «пожеланиями», нежели «требованиями».

• Если при вызове open указан только первый параметр, параметр отсутствует, то используются параметры по умолчанию. Обычно при этом будет открыто не окно, а вкладка, что зачастую более удобно.
• Если указана строка с параметрами, но некоторые yes/no параметры отсутствуют, то браузер выставляет их в no . Поэтому убедитесь, что все нужные вам параметры выставлены в yes .
• Когда не указан top/left , то браузер откроет окно с небольшим смещением относительно левого верхнего угла последнего открытого окна.
• Если не указаны width/height , новое окно будет такого же размера, как последнее открытое.

Доступ к новому окну

Вызов window.open возвращает ссылку на новое окно. Она может быть использована для манипуляции свойствами окна, изменения URL, доступа к его переменным и т.п.

В примере ниже мы заполняем новое окно содержимым целиком из JavaScript:

Представляем объект JS Window — видимость и дочерние элементы

Mar 16, 2020 · 5 min read

Объект window — глобальный объект, обладающий свойствами, относящимися к текущему документу DOM — тому, что находится во вкладке браузера.

Он включает в себя конструкторы, значения свойств и методы для манипулирования текущей вкладкой браузера, например, открытие и закрытие всплывающих окон и т.д.

В этой статье мы рассмотрим свойства объекта window.document , в том числе свойства visibilityState , childElementCount и firstElementChild .

window.document.visibilityState

visibilityState — это свойство, доступное т о лько для чтения, возвращающее статус видимости объекта document — контекст, в котором элемент видим. Полезно знать, виден ли документ в фоновом режиме или на невидимой вкладке, или же загружен для предварительного отображения. Это свойство строки, принимающее следующие значения:

• ‘visible’ — содержимое страницы по крайней мере частично видимо. Это означает, что страница находится на передней вкладке развернутого окна.
• ‘hidden’ — страница не видна пользователю. Это означает, что страница находится или на фоновой вкладке, или в свернутом окне, или за экраном блокировки.
• ‘prerender’ — страница предварительно отображается, но не видна пользователю. Документ может стартовать в этом состоянии, но не сможет перейти в другое значение. Однако это значение убрано из стандарта, поэтому может не возвращаться большинством современных браузеров.

Напишем следующий код, чтобы посмотреть видимость вкладки браузера:

Если мы отделим консоль разработки браузера от вкладки, то будем переключаться между вкладками через console.log из консоли разработки. Саму вкладку видеть мы не будем. Тогда, в логах будет ‘visible’ , когда вкладка будет видна. Когда переключаетесь из вкладки, из которой логируются данные visibilityState в другую вкладку, console.log выводит hidden .

window.document. childElementCount

childElementCount — это числовое свойство, доступное только для чтения, возвращающее многоразрядное число без знака, которое отображает количество дочерних элементов заданного элемента. Например, при запуске:

мы получим 1, так как единственный дочерний элемент document — это html элемент.

window.document. children

Чтобы получить дочерние элементы document , используем свойство children — свойство, доступное только для чтения, возвращающее подобный массиву объект HTMLCollection со всеми дочерними элементами объекта document с момента его вызова. Например, у нас есть следующий HTML код:

Мы можем перебрать значения объекта HTMLCollection с помощью цикла for. of , как в следующем коде:

Мы получим сообщение console.log . Сначала мы получим:

в первой строке console.log . Во второй строке console.log получим следующий вывод:

В третьей строке получим:

Так как мы получаем свойство children из объекта document , элемент html будет единственным дочерним элементом, следовательно у нас будет только один объект children .

window.document. firstElementChild

firstElementChild — свойство, доступное только для чтения, возвращающее первый дочерний элемент document . Так как дочерний элемент один — это html элемент — он и будет возвращен. Он обладает свойствами объекта Element и, соответственно, свойствами HTML элемента. Если дочерних элементов нет, вернется null . Объект Element также обладает следующими свойствами:

• attributes — свойство, доступное только для чтения; возвращает объект NamedNodeMap , в котором перечислены все атрибуты связанные с HTML элементом.
• classList — свойство, доступное только для чтения, содержащее список атрибутов класса.
• className — свойство, доступное только для чтения. Содержит класс элемента.
• clientHeight — свойство, доступное только для чтения, представляющее внутреннюю высоту элемента.
• clientLeft —свойство, доступное только для чтения, представляющее ширину левой границы элемента.
• clientTop —свойство, доступное только для чтения, представляющее высоту верхней границы элемента.
• clientWidth — свойство, доступное только для чтения, представляющее внутреннюю границу элемента.
• computedName —свойство, доступное только для чтения, содержит метку открытия доступа.
• computedRole — свойство, доступное только для чтения, с ролью ARIA, применяемой к конкретному элементу.
• id — строка, содержащая ID элемента.
• innerHTML — строка, содержащая HTML разметку содержимого элемента.
• localName — свойство, доступное только для чтения, содержащее локальную часть подходящего имени элемента.
• namespaceURI —свойство, доступное только для чтения, содержащее пространство имен URL элемента, или null , если пространство имен отсутствует.
• nextElementSibling — свойство, доступное только для чтения, содержащее объект Element , отображающий следующий за текущим элемент или null в отсутствие такового.
• outerHTML — строка, отображающая разметку элемента, включая содержимое. Также это свойство можно настроить так, чтобы оно заменяло содержимое элемента на HTML, присвоенный этому свойству.
• part — содержит идентификаторы частей, установленных атрибутом part .
• prefix — свойство строки, доступное только для чтения, содержащее префикс пространства имен элемента или null , если префикс не задан.
• previousElementSibling — свойство, доступное только для чтения, содержащее объект Element , отображающий предыдущий элемент или null в отсутствие такового.
• scrollHeight — числовое свойство, доступное только для чтения, отображающее высоту прокрутки элемента.
• scrollLeft — числовое свойство, отображающее смещение прокрутки элемента влево; может быть геттером или сеттером.
• scroolLeftMax — числовое свойство, доступное только для чтения, отображающее максимально возможное для элемента смещение прокрутки влево.
• scrollTop — числовое свойство, содержащее количество пикселей вверху документа, который прокручивается вертикально.
• scrollTopMax — свойство, доступное только для чтения, содержащее максимально возможное для элемента смещение прокрутки вверх.
• scrollWidth — числовое свойство, доступное только для чтения, отображающее ширину прокрутки элемента.
• shadowRoot — свойство, доступное только для чтения, отображающее открытый теневой корень, размещенный в элементе или null в отсутствие теневого корня.
• openOrClosedShadowRoot — свойство, доступное только для чтения для веб-расширений с теневым корнем, размещенных в элементе независимо от статуса.
• slot — имя слота теневого DOM, в который вставлен элемент.
• tabStop — логическое свойство, отображающее, может ли элемент получить фокус ввода при нажатии кнопки табуляции.
• tagName — свойство, доступное только для чтения, со строкой, содержащей имя тэга заданного элемента.

Например, используя следующий код:

получим что-то вроде:

Индивидуальные свойства объекта HTMLElement можно получить так:

Затем мы должны получить ширину левой границы html элемента — это 0 — и получить HTML-содержимое документа, логированное в двух последних журналах консоли.

С объектом document мы получаем несколько удобных свойств, позволяющих нам получать элементы документа. Свойство visibilityState позволяет узнать, видима вкладка браузера или нет.

Свойство childElementCount отображает количество дочерних элементов объекта документа, которое должно равняться 1, так как единственным дочерним элементом объекта является html элемент.

Свойство firstElementChild выдает первый дочерний элемент объекта документа, который должен быть html элементом, так как является единственным дочерним элементом документа.