JS властивість Object.parent
Загальний опис
parent - це властивість об'єкта Window в мові програмування JavaScript, яка надає посилання на батьківське вікно, яке вміщує поточне вікно браузера. Використовуючи цю властивість, можна отримати доступ до об'єкта батьківського вікна та взаємодіяти з його властивостями та методами.
Основна суть parent полягає у можливості навігації та спілкування між вкладеними вікнами або фреймами на веб-сторінці. Зазвичай це використовується в контексті вкладених фреймів, де фрейм може отримати доступ до свого батьківського вікна для обміну інформацією чи керування вмістом.
Щоб використовувати parent, можна використовувати наступний код. Нехай parentWindow буде змінною, яка отримує значення parent:
var parentWindow = window.parent;
console.log("Посилання на батьківське вікно: ", parentWindow);
У цьому прикладі ми використовуємо глобальний об'єкт window та його властивість parent. Отримане значення можна використовувати для подальшої роботи з батьківським вікном.
Застосування parent дозволяє створювати взаємодію між фреймами або вкладеними вікнами веб-сторінки. Наприклад, вікно або фрейм може використовувати parent для звернення до елементів або функцій у батьківському вікні.
У реальних сценаріях це може бути корисно, наприклад, при створенні складних інтерфейсів з використанням фреймів, де один фрейм може взаємодіяти з іншим через parent. Також, це може використовуватися для передачі даних або викликів між вкладеними вікнами.
| Порада: | Враховуйте можливість використання |
| Порада: | Застосовуйте |
| Порада: | Уникайте надмірного використання |
Синтаксис
window.parentЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1.3 |
3 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У наведеному вище HTML-коді створюється сторінка, яка демонструє використання властивості window.parent. Користувач може натиснути на кнопку "Перевірити window.parent", щоб визначити, чи має поточне вікно батьківське вікно, тобто чи є воно iframe в іншому документі.
У цьому прикладі ми використовуємо parent для взаємодії між батьківським і вкладеним вікнами (фреймами). Батьківське вікно може відправити повідомлення вкладеному вікну, і вкладене вікно слухає події message, щоб обробити отримані дані.
// У цьому прикладі ми використовуємо parent для взаємодії між вкладеними вікнами.
// Внутрішнє вікно може взаємодіяти зі своїм батьківським вікном.
// Код в батьківському вікні
function sendMessageToChild() {
// Отримуємо посилання на вкладене вікно за допомогою parent
let childWindow = window.frames['childFrame'];
// Відправляємо повідомлення вкладеному вікну
childWindow.postMessage('Привіт, це батьківське вікно!', '*');
}
// Код у вкладеному вікні (фреймі)
window.addEventListener('message', function(event) {
// Перевіряємо, чи отримано повідомлення від батьківського вікна
if (event.source === parent) {
alert('Отримано повідомлення від батьківського вікна: ' + event.data);
}
});
У цьому прикладі ми використовуємо parent для динамічного завантаження зовнішнього скрипта в батьківському вікні. Це може бути корисним, наприклад, для динамічного завантаження модулів або бібліотек у веб-додатках.
// У цьому прикладі ми використовуємо parent для динамічного завантаження ресурсів в батьківському вікні.
// Код в батьківському вікні
function loadResourceInParent() {
// Отримуємо посилання на батьківське вікно за допомогою parent
let parentWindow = window.parent;
// Створюємо новий елемент script та додаємо його до батьківського вікна
let scriptElement = document.createElement('script');
scriptElement.src = 'https://example.com/script.js';
parentWindow.document.head.appendChild(scriptElement);
}