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

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

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

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

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

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

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

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

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

правити

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

Якщо сторінка відкрита сама по собі, parent дорівнює самому window. Саме на цьому будується найкоротша перевірка «чи я в рамці»: window !== window.parent.

І це важливо не лише з цікавості: клікджекінг — атака, коли зловмисник відкриває твій сайт у прозорому iframe поверх свого й ловить кліки користувача. Перевірка допомагає її помітити (хоч надійно захищає лише заголовок X-Frame-Options із боку сервера).

Дістатись до вмісту батька з іншого домену не можна — лише надіслати йому повідомлення через postMessage().

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

window.parent

Переглядачі

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

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

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

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

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

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

Переглядач
	—

Приклади

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

// найкоротша перевірка «я в iframe?»
if (window !== window.parent) {
    console.warn('Сторінку відкрито в рамці');
}

// до вмісту чужого батька доступу немає — лише повідомлення
window.parent.postMessage({ type: 'ready' }, 'https://example.com');

// найвище вікно в ланцюжку рамок
console.log(window.top === window.parent);

<header>
  <h2 class="title"><code>window.parent</code></h2>
  <p class="description">Дозволяє отримати доступ до батьківського вікна поточного вікна (iframe).</p>
</header>
<main>
  <div class="result">
    <p id="demo">Натисніть кнопку, щоб перевірити, чи поточне вікно має батьківське вікно.</p>
    <button onclick="checkParent()">Перевірити <code>window.parent</code></button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  text-align: center;
}

button {
  margin-top: 10px;
}

function checkParent() {
  // Цей скрипт перевіряє, чи поточне вікно є іфреймом і має батьківське вікно
  if (window.parent !== window) {
    document.getElementById('demo').innerHTML = 'Це вікно має батьківське вікно.';
  } else {
    document.getElementById('demo').innerHTML = 'Це вікно не є іфреймом і не має батьківського вікна.';
  }
}
//# sourceURL=pen.js

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