JS властивість Object.opener
Загальний опис
Властивість window.opener в JavaScript відіграє важливу роль у взаємодії між браузерними вікнами або вкладками. Ця властивість посилається на об'єкт window, який відкрив поточне вікно. Найчастіше її використовують для передачі даних між вікнами або вкладками, що дає змогу створювати більш інтерактивні та зв'язані веб-додатки.
Властивість window.opener важлива для сценаріїв, де потрібно передавати інформацію між вікнами або вкладками. Наприклад, якщо вікно А відкрило вікно Б, то вікно Б може використовувати window.opener для доступу до властивостей або методів вікна А. Це корисно для реалізації функцій, таких як авторизація користувача в одному вікні та автоматичне оновлення іншого вікна або вкладки після завершення процесу авторизації.
Приклади використання
Передача даних між вікнами: Якщо вікно А відкрило вікно Б, вікно Б може використовувати
window.openerдля отримання або зміни даних в вікні А.// В вікні А let newWindow = window.open('windowB.html'); // В вікні Б (windowB.html) if (window.opener) { window.opener.document.title = "Змінено з вікна Б"; }Взаємодія з батьківським вікном після завершення дії:
window.openerможе бути використана для оновлення батьківського вікна після виконання дій у дочірньому вікні, наприклад, після успішної авторизації.// Припустимо, користувач авторизувався в вікні Б if (window.opener) { window.opener.location.reload(); // Оновлення батьківського вікна window.close(); // Закриття поточного вікна }Безпека використання
window.opener: Важливо знати, що при використанніwindow.openerіснують певні ризики безпеки, зокрема відома проблема "tabnabbing". Щоб запобігти цьому, рекомендується встановитиrel="noopener noreferrer"для посилань, які відкривають нові вікна.<a href="https://example.com" target="_blank" rel="noopener noreferrer">Відкрити приклад</a>
У резюме, 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');