JS властивість Object.parent

Загальний опис

parent - це властивість об'єкта Window в мові програмування JavaScript, яка надає посилання на батьківське вікно, яке вміщує поточне вікно браузера. Використовуючи цю властивість, можна отримати доступ до об'єкта батьківського вікна та взаємодіяти з його властивостями та методами.

Основна суть parent полягає у можливості навігації та спілкування між вкладеними вікнами або фреймами на веб-сторінці. Зазвичай це використовується в контексті вкладених фреймів, де фрейм може отримати доступ до свого батьківського вікна для обміну інформацією чи керування вмістом.

Щоб використовувати parent, можна використовувати наступний код. Нехай parentWindow буде змінною, яка отримує значення parent:

var parentWindow = window.parent;
console.log("Посилання на батьківське вікно: ", parentWindow);

У цьому прикладі ми використовуємо глобальний об'єкт window та його властивість parent. Отримане значення можна використовувати для подальшої роботи з батьківським вікном.

Застосування parent дозволяє створювати взаємодію між фреймами або вкладеними вікнами веб-сторінки. Наприклад, вікно або фрейм може використовувати parent для звернення до елементів або функцій у батьківському вікні.

У реальних сценаріях це може бути корисно, наприклад, при створенні складних інтерфейсів з використанням фреймів, де один фрейм може взаємодіяти з іншим через parent. Також, це може використовуватися для передачі даних або викликів між вкладеними вікнами.

правити

Порада

Застосовуйте parent для реалізації комунікації між різними компонентами веб-сайту. Використовуючи цю властивість, ви можете здійснювати взаємодію та синхронізацію між різними частинами вашого додатку.

автор: Bond правити

Порада

Враховуйте можливість використання parent для обміну даними між фреймами або вікнами. Ви можете передавати значення з одного контексту до іншого, забезпечуючи єдність функціоналу.

автор: Bond правити

Порада

Уникайте надмірного використання parent, оскільки це може призвести до втручання в інші частини коду. Використовуйте цю властивість обачно та лише там, де це дійсно необхідно для досягнення певного функціоналу.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

window.parent

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1.3	3	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	—

Приклади

+ запропонувати свій приклад у пісочниці

// У цьому прикладі ми використовуємо parent для взаємодії між вкладеними вікнами.
// Внутрішнє вікно може взаємодіяти зі своїм батьківським вікном.

// Код в батьківському вікні
function sendMessageToChild() {
  // Отримуємо посилання на вкладене вікно за допомогою parent
  let childWindow = window.frames['childFrame'];

  // Відправляємо повідомлення вкладеному вікну
  childWindow.postMessage('Привіт, це батьківське вікно!', '*');
}

// Код у вкладеному вікні (фреймі)
window.addEventListener('message', function(event) {
  // Перевіряємо, чи отримано повідомлення від батьківського вікна
  if (event.source === parent) {
    alert('Отримано повідомлення від батьківського вікна: ' + event.data);
  }
});

// У цьому прикладі ми використовуємо 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);
}