css.in.ua
Підтримати

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

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

Властивість window.opener в JavaScript відіграє важливу роль у взаємодії між браузерними вікнами або вкладками. Ця властивість посилається на об'єкт window, який відкрив поточне вікно. Найчастіше її використовують для передачі даних між вікнами або вкладками, що дає змогу створювати більш інтерактивні та зв'язані веб-додатки.

Властивість window.opener важлива для сценаріїв, де потрібно передавати інформацію між вікнами або вкладками. Наприклад, якщо вікно А відкрило вікно Б, то вікно Б може використовувати window.opener для доступу до властивостей або методів вікна А. Це корисно для реалізації функцій, таких як авторизація користувача в одному вікні та автоматичне оновлення іншого вікна або вкладки після завершення процесу авторизації.

Приклади використання

  1. Передача даних між вікнами: Якщо вікно А відкрило вікно Б, вікно Б може використовувати window.opener для отримання або зміни даних в вікні А.

    // В вікні А
let newWindow = window.open('windowB.html');

// В вікні Б (windowB.html)
if (window.opener) {
  window.opener.document.title = "Змінено з вікна Б";
}

  2. Взаємодія з батьківським вікном після завершення дії: window.opener може бути використана для оновлення батьківського вікна після виконання дій у дочірньому вікні, наприклад, після успішної авторизації.

    // Припустимо, користувач авторизувався в вікні Б
if (window.opener) {
  window.opener.location.reload(); // Оновлення батьківського вікна
  window.close(); // Закриття поточного вікна
}

  3. Безпека використання window.opener: Важливо знати, що при використанні window.opener існують певні ризики безпеки, зокрема відома проблема "tabnabbing". Щоб запобігти цьому, рекомендується встановити rel="noopener noreferrer" для посилань, які відкривають нові вікна.

    <a href="https://example.com" target="_blank" rel="noopener noreferrer">Відкрити приклад</a>

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

Порада:

Будьте обережні з безпекою при роботі з window.opener. Малічні сайти можуть зловживати цією властивістю, змінюючи вміст батьківського вікна. Для запобігання таким ситуаціям переконайтеся, що взаємодіяєте тільки з довіреними джерелами.
Порада:

Перед використанням window.opener перевірте, чи вікно не було відкрите в новій вкладці без opener. У такому випадку властивість window.opener буде null, і спроба доступу до її властивостей або методів спричинить помилки.
Порада:

Щоб уникнути витоку пам'яті або неочікуваних зв'язків між вікнами, важливо встановити window.opener в null у вікні, яке було відкрите. Це особливо актуально при відкритті зовнішніх посилань, щоб убезпечити програму від потенційних загроз ззовні.

if (window.opener) {
 window.opener = null;
}
Порада:

Використання window.opener може бути обмежене в деяких сучасних браузерах з міркувань безпеки, особливо коли взаємодія відбувається між вікнами з різних доменів.

Синтаксис

Window.opener

Значення

Return

Переглядачі

Переглядач

1

1

1

3

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


У цьому складнішому прикладі демонструється використання window.opener для синхронізації даних між батьківським і дочірнім вікнами. Ми створимо функцію в батьківському вікні, яка оновлюється дочірнім вікном, і навпаки, з використанням window.opener.

// Перевірка наявності батьківського вікна
if (window.opener && window.opener.updateParentData) {
  // Надсилання даних у батьківське вікно
  window.opener.updateParentData("Деякі важливі дані");

  // Оновлення даних у дочірньому вікні з батьківського
  window.onmessage = (event) => {
    console.log("Отримано дані від батьківського вікна:", event.data);
  };
}

У цьому прикладі ми використовуємо властивість window.opener для отримання посилання на батьківське вікно, яке відкрило поточне вікно. Це особливо корисно, коли потрібно взаємодіяти з батьківським вікном, наприклад, для оновлення даних або надсилання інформації назад.

// Функція оновлення даних у батьківському вікні
function updateParentData(data) {
  console.log("Дані отримано від дочірнього вікна:", data);
}

// Відкриття дочірнього вікна
const childWindow = window.open('child.html');

Спільнота

Зв'язок