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. Малічні сайти можуть зловживати цією властивістю, змінюючи вміст батьківського вікна. Для запобігання таким ситуаціям переконайтеся, що взаємодіяєте тільки з довіреними джерелами.

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

Порада

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

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

Порада

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

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

Порада

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

if (window.opener) {
 window.opener = null;
}

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

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

Синтаксис

Window.opener

Переглядачі

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

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

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

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

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

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

Переглядач
	-	-

Приклади

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

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

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

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

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